¿Cómo puedo implementar esto?
Quiero mapear a través de la matriz de planes y para cada elemento presentar una lista. Mientras esto funciona, en caso de que tengamos nulo o indefinido en un título, todavía tenemos 4 representaciones de etiquetas Li, de las cuales la segunda no tiene ningún contenido. pero, ¿cómo puedo implementar esto si el título es nulo/indefinido? El objeto se ignora y pasa al siguiente objeto y representa el resto de la matriz.
Espero que mi explicación sea clara.
import React from "react"; const App = (props) => { const plans = [ { title: "Starter", plan: "plan_0", }, { title: undefined, plan: "plan_1A", }, { title: "Classic", plan: "plan_2A", }, { title: "Premium", plan: "plan_3A", }, ]; return ( <div> <h1>Notes</h1> <ul> {plans.map((plan, i) => <li className="something" key={i}> <span className="somethingels">{plan.title}</span> </li> )} </ul> </div> ); }; export default App;en este momento su render así:
<li>Starter</li> <li></li> <li>Classic</li> <li>Premium</li>Simplemente agregar una declaración condicional debería hacer el truco:
{plans.map((plan, i) => { plan.title && <li className="something" key={i}> <span className="somethingels">{plan.title}</span> </li> } )}verifique que el plan tenga una propiedad de título antes de representar un elemento de la lista :)
<ul> {plans.map( (plan, i) => plan.title && ( <li className="something" key={i}> <span className="somethingels">{plan.title}</span> </li> ) )} </ul>