I know its possible to map an array of some sort like so:
{sumArray.map((summary, index) => (
<Col className="stat-element" key={index}>
</Col>
))}
However I want to map a single object by each of its properties:
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);
}
}, [])
However on output this strips the properties title, how do I make it retain the properties name so I can display each within the following? :
{summary.map((property, index) => (
<Col className="stat-element" key={index}>
{index} {propertyname} {property}
</Col>
))}
I think you should then declare summary as an object and not an array and then you could use the Object.keys methods:
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>
))}