Estoy en la etapa de aprendizaje de JS y React y no estoy seguro de por qué si no funciona en el código a continuación. ¿Alguien puede ayudarme?
function Item({ name, isPacked }) { if (isPacked) { return ( <li className="item"> {name} {isPacked && " ✔"} </li> ); } else if (!isPacked) { return ( <li className="item"> {name} {isPacked && " ❌"} </li> ); } } export default function PackingList() { return ( <section> <h1>Sally Ride's Packing List</h1> <ul> <Item isPacked={true} name="Space suit" /> <Item isPacked={true} name="Helmet with a golden leaf" /> <Item isPacked={false} name="Photo of Tam" /> </ul> </section> ); }Prueba así:
function Item({ name, isPacked }) { return ( <li className="item"> {`${name} ${isPacked ? "✔" : '❌'} `} </li> ); }en realidad probaste si isPacked es verdadero o falso, así que prueba este código:
function Item({ name, isPacked }) { return ( <li className="item"> {name} {isPacked ? "✔" : "❌" } </li> ); }{esta empacado ? "✔" : "❌" } por lo que esta línea de código es igual a:
if(isPacked == true){ return "✔"; }else{ return "❌"; }Puede obtener algunos ejemplos útiles aquí https://reactjs.org/docs/conditional-rendering.html .