I just started React and I'm facing a problem: when I run this piece of code, nothing is displayed.
const plantList = {
name: 'monstera',
category: 'classique',
id: '1ed',
isBestSale: true
};
function Notes(){
plantList.map((plant) => (
<li key={ plant.id }>
{plant.isBestSale ? <span>🔥</span> : <span>👎</span>}
</li>
))}
export default NotesThank you in advance
plantList is an object, you probably want to put it in an array if you want to put multiple plants in it and have the ability to map over it.
const plantList = [{
name: 'monstera',
category: 'classique',
id: '1ed',
isBestSale: true
}];
You are not returning a value from your function component.
function Notes(){
return (
<>
{plantList.map((p) => (p.isBestSale ? <span>🔥</span> : <span>👎</span>))}
</>
);
}
playlist is an object. But the object is not iterable in js. if you want to iterate you need to make it an array look like as
const plantList = [{
name: 'monstera',
category: 'classique',
id: '1ed',
isBestSale: true
}];
you need to return anything from class/functional component to display
function Notes(){
return (
<>
{plantList.map((p) => (p.isBestSale ? <span>🔥</span> : <span>👎
</span>))}
</>
)}
export default Notes