Posted on May 9, 2021 • Originally published at makneta.herokuapp.com

Objects are not valid as a React child - Covid Map project part 5

Last time I stopped at the point where I wanted to add data about all cases, deaths and so on. It seemed to be an easy task. I had the data fetched thanks to the useFetch() hook.
The next step was to create a DataAll.js component and pass the data to this component.

Things I did and problems I encountered.

I passed data to DataAll.js component and tried to go over them like usual:

 {!props.global ? null : ( <StyledGridSection> {props.global.map((item) => { const { cases, critical, deaths, todayRecovered, todayCases, todayDeaths, updated, } = item; return ( <> <div>{cases}</div>  {/* only a small part of my code */} </>  ); })} </StyledGridSection>  )}

But the only thing I was getting was an error:

Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.

The error is pretty obvious but I wasn't sure how to resolve it. How to change an object into an array and where in my app I should do it? I was reading about different JS methods but eventually, I had to add square brackets around props.global while using map() method

 {[props.global].map((item) => {})}

Because I was dealing with large numbers that are difficult to read without commas or spaces, I used toLocaleString() method again.

 <LargeNums>{deaths.toLocaleString()}</LargeNums>

- this tag is from styled components.

I also wanted to change the date a bit. toLocaleString() method can also take arguments: language and options. I set language to "default" and in options, I specified that I want to have full weekday and month (without abbreviation), day and year as numbers and also time with 2-digit hour and minute.

 const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit', };

I still should refactor the code to get rid of each repetition of the StyledGridElem but I left it as it was. It's not perfect but it's working.

import React from 'react'; import { StyledGridSection, StyledSection, DateRow } from './modules/Sections'; import { SectionTitle, LargeNums, Subtitle, SubtitleGrid, } from './modules/Titles'; import { StyledGridElem } from './modules/GridElem'; const DataAll = (props) => { return ( <StyledSection> <SectionTitle>Worldwide</SectionTitle>  {!props.global ? null : ( <StyledGridSection> {[props.global].map((item) => { const { cases, critical, deaths, todayRecovered, todayCases, todayDeaths, updated, } = item; const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit', }; const date = new Date(updated); return ( <> <StyledGridElem> <SubtitleGrid>Total Cases:</SubtitleGrid>  <LargeNums>{cases.toLocaleString()}</LargeNums>  </StyledGridElem>  <StyledGridElem> <SubtitleGrid>Critical: </SubtitleGrid>  <LargeNums>{critical.toLocaleString()}</LargeNums>  </StyledGridElem>  <StyledGridElem> <SubtitleGrid>Deaths: </SubtitleGrid>  <LargeNums>{deaths.toLocaleString()}</LargeNums>  </StyledGridElem>  <StyledGridElem> <SubtitleGrid>Today Cases: </SubtitleGrid>  <LargeNums>{todayCases.toLocaleString()}</LargeNums>  </StyledGridElem>  <StyledGridElem> <SubtitleGrid>Today Recovered:</SubtitleGrid>  <LargeNums>{todayRecovered.toLocaleString()}</LargeNums>  </StyledGridElem>  <StyledGridElem> <SubtitleGrid>Today Deaths:</SubtitleGrid>  <LargeNums>{todayDeaths.toLocaleString()}</LargeNums>  </StyledGridElem>  <DateRow> <Subtitle>Updated: </Subtitle>  <p>{date.toLocaleString('default', options)}</p>  </DateRow>  </>  ); })} </StyledGridSection>  )} </StyledSection>  ); }; export default DataAll;