JSX condition that does not work with React

Question

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 Notes

Thank you in advance

Answer 1

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>))}
    </>
  );
}

Answer 2

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