I can get all my api info, but when create a new "recipe" and I try to show it on the Front, I get that error, but just on the "recipe" that I created, :c

import React from "react";
import './estilos/Cartita.css'

export default function Card({image, title, diets, healthScore, createdInBd, id}){

return (
    <div className="containerr">

<div className="card">
    <h2>{id}</h2>


        <img src={image} alt="img not found" width="200px" height="250px"/>



<h2>NOMBRE:</h2>
<h5>{title}</h5>
<p>Tipo de dieta</p>
<div >
{
(!diets.length)?
<span>This Recipe doesnt have a diet
</span> : 
 
 diets.map((diet) => (
 
 <span><li key={diets}> {diet}</li></span>
                        )
                    )}
 </div>

<h2>HEALTSCORE:</h2>
<h5>{healthScore}</h5>


<h5>{createdInBd}</h5>
</div>
   </div>
);

}

and this is the Api info, the top one is from the api and the other one is the one that I created:

enter image description here

CodePudding user response：

due to your screenshot diets can be array of strings or array of objects, therefore you need to check if diet is an object

 {!diets.length ?
  <span>This Recipe doesnt have a diet</span> : 
  diets.map((diet) => (
    <span><li key={diet.id}>{typeof diet === 'string' : diet : diet.Dname}</li></span>
    )
  )}