I'm practicing the map function and I don't understand why it doesn't return 2 hellos, what am I doing wrong?
I have no answer, what can I be doing wrong?
const Books = [
{
img: imagen,
title: "murakami",
año: 2022,
genero: "terror",
edicion: "ivrea",
},
{
img: imagen2,
title: "Joe hill",
año: 2022,
genero: "aventura",
edicion: "panini",
},
];
function BookList() {
return (
<section>
{Books.map((book) => {
return "Hello";
})}
</section>
);
}
function App() {
return <div>{BookList}</div>;
}
BookList is a component, but you are treating it as a react node. This works fine for types that can be react nodes: strings, numbers, or other Components work fine:
function App() {
const content = "hello hello";
return <div>{content}</div>;
}
What you are actually doing is trying to make an uncalled function a child of a react component. This is incorrect and should result in a runtime error.
return <div><BookList /></div> should do the trick, the JSX calls your component function, which should display it.