Objects are not valid as a React child - Covid Map project part 5
Tags: react, project
Published: 2021-05-09 08:22:53

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:

```javascript
 {!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 

```javascript
 {[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. 

```javascript
 <LargeNums>{deaths.toLocaleString()}</LargeNums>
```
<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. 

```javascript 
     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. 

```javascript
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;
```

### The part of the projects looks now like this:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/krsvzovwjadh2hkb7gdd.png)

## Next steps:
1. Add news about covid
2. Add line or bar charts 
3. Add search functionality
4. Change markers on a map