Sé que es posible mapear una matriz de algún tipo así:
{sumArray.map((summary, index) => ( <Col className="stat-element" key={index}> </Col> ))}Sin embargo, quiero mapear un solo objeto por cada una de sus propiedades:
const [summary, setSummary] = useState([{rank: 0}, {trending: 0}, {totalTaskCompleted: 0}, {avgTaskCorrect: 0}, {avgTaskTime: 0 }]); useEffect(() => { if (parentToChild){ console.log(parentToChild) const result = Object.values(parentToChild); setSummary(result); console.log(result); } }, [])Sin embargo, en la salida, esto elimina el título de las propiedades, ¿cómo hago para que conserve el nombre de las propiedades para poder mostrar cada una de las siguientes? :
{summary.map((property, index) => ( <Col className="stat-element" key={index}> {index} {propertyname} {property} </Col> ))}Creo que luego debería declarar el resumen como un objeto y no como una matriz y luego podría usar los métodos Object.keys:
const [summary, setSummary] = useState({rank: 0, trending: 0, totalTaskCompleted: 0, avgTaskCorrect: 0, avgTaskTime: 0 }); (...) Object.keys(summary).map((key, index) => ( <Col className="stat-element" key={index}> {index} {key} {summary[key]} </Col> ))}