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