JSX condition that does not work with React

user_16318368 0
Viewed 46

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

reactjs function dictionary javascript
2 Answers

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

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

user_157339640
Related