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;
The part of the projects looks now like this:
Next steps:
- Add news about covid
- Add line or bar charts
- Add search functionality
- Change markers on a map
Top comments (0)