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

#react #project

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;