estoy tratando de mapear a través de un objeto con el objetivo de representar la clave y su valor dentro de la etiqueta ap. Tengo el objeto de mensaje de error que no es un niño de reacción válido. ¿Cómo puedo superar este error? gracias de antemano
<div className="d-flex flex-wrap"> { Object.keys(features).map((item,index) => { console.log('type',item); console.log(features[item]); return <p key={item} className="fw-bold bg-light fs-6 text-primary m-1 p-2">{{[item]:features[item]}}</p> }) } </div>Este error se debe a que el código
{{[item]:features[item]}} realmente da como resultado un objeto. Entonces, el hijo de la etiqueta <p> es un objeto. Puede resolverlo usando literales de plantilla dentro de la etiqueta <p>
<div className="d-flex flex-wrap"> { Object.keys(features).map((item,index) => { console.log({[item]:features[item]}); console.log(features[item]); return <p key={item} className="fw-bold bg-light fs-6 text-primary m-1 p-2" >{`{${item}: ${features[item]}}`}</p> }) } </div>En esta sección de React doc , se dice que:
Puede poner cualquier expresión de JavaScript válida dentro de las llaves en JSX
Además {[item]:features[item]} en sí mismo no es una expresión válida, según esta lista
Entonces, en su lugar, debe incrustar 2 expresiones, item y features[item]
return ( <p key={item} className="fw-bold bg-light fs-6 text-primary m-1 p-2"> {item}: {features[item]} </p> )Hazlo asi
Object.keys(features).map((item) => { return <p> {item} : {features[item]}</p> }