JSX condition that does not work with React

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

>Solution :

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