Estoy tratando de mapear a través de un objeto que se pasa como accesorio y quiero mostrar diferentes elementos HTML para diferentes valores de objeto
Objeto;
const allDesc = {description: "Title Description", description1: "Intro Description", description3:"Sub title", description3: "Sub Description"}Código:
<div> {Object.keys(allDesc).map((desc, index) => { if (allDes[desc] !== "") { return ( <> <h1>allDesc.description</h1> <p>allDesc.description1</p> <h3>allDesc.description2</h3> <p>allDesc.description3</p> </> ); } })} </div>Este enfoque no muestra nada, cuál sería el enfoque correcto para mapear a través de un objeto y mostrar diferentes elementos HTML para diferentes valores de objeto. ¡Gracias!
Por favor, intente esto.
<div> {Object.keys(allDesc).map((desc, index) => { if (allDes[desc] !== "") { return ( <> { desc === 'description' ? <h1>allDes[desc]</h1> : <p>allDes[desc]</p> } </> ); } })} </div> este allDes[desc] tiene el valor de todos los campos que recorre desde las teclas Objeto.
map sobre las entradas de Object.entries . Si la clave coincide con "descripción", devuelve el valor como <h1> , de lo contrario, devuelve el valor como <p> .
function Example({ allDesc }) { return ( <div> {Object.entries(allDesc).map(([key, value]) => { if (key === 'description') return <h1>{value}</h1>; if (key === 'description3') return <h3>{value}</h3>; return <p>{value}</p>; })} </div> ); }; const allDesc = {description: 'Title Description', description1: 'Intro Description', description3: 'Another Description', description4: 'More text' }; ReactDOM.render( <Example allDesc={allDesc} />, document.getElementById('react') ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>