How to render a boolean value in an array with condition

what I’m trying to do is to render every item of the array with the certified value next to it.

const ShoppingList= ()=> {
return (
    <ul>
        {itemList.map((item, index) => (
             <li key={`${item}-${index}`}>{ item }


                 key={ item.id }
                     {itemList.isCertified ? <span>Est certifié</span> : <span>n'est pas ceritfié</span>}
                 </li>


        ))}
    </ul>

)
}

export default ShoppingList

isCertified is a boolean value in each item of my array

const itemList = [
{
    name : 'chargeur',
    id: '5E034',
    isCertified:  true
},
{
    name: 'téléphone',
    id: "5E033",
    isCertified : true
},
{
    name: 'coque',
    id: "5E055",
    isCertified : true
},
{
    name: 'cable',
    id: "5E333",
    isCertified: false
}

]
export default itemList

I have this error :

Error: Objects are not valid as a React child (found: object with keys {name, id, isCertified}). If you meant to render a collection of children, use an array instead.

Answer

You have written { item } in your code (Just after the opening li tag). React cannot render objects directly in the DOM. That’s why its giving you that error. Just remove it and things will work. If you do want to render the entire object in the DOM, you can use JSON.stringify(item)