im trying to print output in react js using arrays and props. The result should be displayed as 2 headings (h) and 2 paragraphs (p) But it gives this error Error: Home(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null
Note file
const Note = [
{
id:1,
h:"Eggs",
p:"eggs",
},
{
id:2,
h:"Milk",
p:"milk",
}
]
export default Note;
Home file
import React from 'react';
import Note from "./Note";
import menu from "./menu";
function nCard(val)
{
return(
<menu
h={val.h}
p={val.p}
/>
);
}
const Home = (props) =>
{
{Note.map(nCard)}
}
export default Home;
menu file
const menu = (props) =>
{
return (
<div>
<h1>{props.h}</h1>
<p>{props.p}</p>
</div>
)
}
export default menu;
Index js file
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import index from './index.css';
import {BrowserRouter} from 'react-router-dom';
import servicescontent from "./servicescontent";
import Services from "./Services";
import Contact from "./Contact";
import Home from "./Home";
ReactDOM.render(
<BrowserRouter>
<Home/>
</BrowserRouter>
,document.getElementById('root'));
You can do it without a return statement
const Home = (props) => Note.map(nCard)
much simpler and cleaner
Try changing your Home function to include a return.
const Home = (props) =>
{
return Note.map(nCard);
};
You need a return statement in your Home component. Also, first letter of your component name should be uppercase. So, updated code will be:
import React from 'react';
import Note from "./Note";
import Menu from "./menu";
function nCard(val)
{
return(
<Menu
h={val.h}
p={val.p}
/>
);
}
const Home = (props) =>
{
return Note.map(nCard)
}
export default Home;