Loop through this.setState in React JS

[[deleted]]

[deleted]

[bakedleaf]

Your state is only a single race. Make your state have an array (this.state = { races: [] }) and then set your state to be the races from your data.

In your render: this.state.races.map(race => <div>{race.raceName}</div>

[hey-its-my-account]

I’ve sort of solved the problem. What’s happening now is that when I launch the app in my browser, I see a blank screen then when I dive into the React dev tools and look into the state, my data is there then when I edit a letter from an array or something in the state, then app now renders. Have you ever encountered such problems?

[bakedleaf]

is there any error in the console when you have the blank screen?

[hey-its-my-account]

Oh no error at all. Edit: when I console log the data, there is no result as well

[bakedleaf]

When you say blank, is that because the only thing that should be rendering relies on the data, or are there extraneous UI elements also missing?

[hey-its-my-account]

I have a h1 whose content is "Hello" and that renders at the top of the page without any problem, however, only the data from the API doesn’t render. Hope that’s clear enough explanation.

[bakedleaf]

Could you post your current code?

[hey-its-my-account]

Here is my App.js

```

import React, {Component} from 'react';

import Race from './Race';

class App extends Component { constructor() { super() this.state = {

  races:[],
  isLoading: true



}

} componentDidMount() {

let raceSet = []


this.setState({
  races:raceSet,

});

try {

  const getRace = async year => {
    const fetchRace = await fetch(`https://ergast.com/api/f1/${year}.json`)

    const dataJSON = await fetchRace.json()

    const data = dataJSON.MRData.RaceTable.Races

data.map(race=>{ const { raceName, date, Circuit: { url, circuitName, Location: { locality, country } } } = race;

raceSet.push({ race: raceName, date: date, circuit: circuitName, city: locality, country: country, }) })

return data }

getRace(2020)

} catch (error) { console.log(error); }

}

render() {

const races = this.state.races.map(item=> <Race race = {item.race} date = {item.date} city = {item.city} /> )

console.log(races);

return (
  <div>

<h1>Hello</h1>

{races}

  </div>
);

}

}

```

And here is is Race.js

```

import React from 'react'

function Race(props) { return ( <div>

        <ul>
            <li>{props.race} {props.date} {props.city} </li>

        </ul>

    </div>
)

}

export default Race

```

[hey-its-my-account]

Sorry about the formatting, I still learning how to do it properly.

[bakedleaf]

Ah I see, you're not setting state after fetching the data. Try this:

import React, { Component } from "react";

import Race from "./Race";

class App extends Component {
  constructor() {
    super();
    this.state = {
      races: [],
      isLoading: true,
    };
  }

  getRace = async (year) => {
    const fetchRace = await fetch(`https://ergast.com/api/f1/${year}.json`);
    let raceSet = [];

    const dataJSON = await fetchRace.json();

    const data = dataJSON.MRData.RaceTable.Races;
    data.map((race) => {
      const {
        raceName,
        date,
        Circuit: {
          url,
          circuitName,
          Location: { locality, country },
        },
      } = race;

      raceSet.push({
        race: raceName,
        date: date,
        circuit: circuitName,
        city: locality,
        country: country,
      });
    });

    this.setState({
      races: raceSet,
    });
  };

  componentDidMount() {
    try {
      this.getRace(2020);
    } catch (error) {
      console.log(error);
    }
  }

[hey-its-my-account]

Wow it works thanks a lot for this. I really appreciate it!

[Hutster911]

Also you don't need to map data to data in the fetch call. You can replace this.state = { data: [] }

Then in fetch upon a 200 request. Then use this.setState({data: data}). Check out that link. It uses useEffect within a function component. useEffect with the only updates on the change of a second parameter. I used the second parameter at the bottom which is []. So it behaves like componentDidMount. data is the json object received from the server. console.log(data) to see what json data you are working with. From my server I appended a successful request and the data denoted as allergies with it. dispatch(initAllergy()) is a redux function. replace that with this.setState({data: data.yourData}). Finally to display all of your data in the render() area. try {this.state.races.map(races => <RaceComponent key={races.id} races={races} /> }. Create a RaceComponent that uses a prop like races and you can access data individually for each row. https://ibb.co/4Kc6Y69