Displaying Multiple API Responses in React

Question

I am learning React and I have a solution that requests information through an API, and when there is a response it sets the state, however when rendering my results it only shows the last response on screen,

Even though there are 4, see image below.

App.js

import React from 'react';

import Tiles from './components/Tiles'
import Form from './components/Form'
import WaterData from './components/WaterData'

class App extends React.Component{

  state = {
    station_name: undefined,
    water_value: undefined,
    dateTime: undefined
  }

  getData = async (e) => {

    e.preventDefault();

    const name = e.target.elements.name.value;

    const api_call = await fetch(`https://waterlevel.ie/geojson/latest/`)
    .then(response1 => {
      response1.json().then(data =>{
        Array.from(data.features).forEach(element => {
          if(element.properties['station.name'] === name){
            this.setState({
              station_name: element.properties['station.name'],
              water_value: element.properties['value'],
              dateTime: element.properties['datetime'],
            });
          }
      })
    });
  });
}


   render(){
    return(
      <div>
        <Tiles />
        <Form loadData={this.getData}/>
        <WaterData 
           station_name={this.state.station_name}
           water_value={this.state.water_value}
           dateTime={this.state.dateTime}
        />
      </div>
   )
  }
}
export default App;

WaterData.js

import React from 'react';
const Weather = (props) => {


console.log(props)

  return(
    <li>
      <p>Location {props.station_name}</p>
      <p>Value {props.water_value}</p>
      <p>Date Time: {props.dateTime}</p>
    </li>
  )
}
export default Weather;

Can someone explain to me why the 4 responses do not display?

Have you tried setting breakpoints in your .forEach loop? I'd be curious to see whether the page changes with every iteration. — IronFlare
– IronFlare, Commented Aug 27, 2019 at 13:54
If you set incoming data directly to state, it set last data in loop to your state. You must specify data as a array in state and loop it with map method on render. — Abdulsamet Kurt
– Abdulsamet Kurt, Commented Aug 27, 2019 at 13:58

Treycos · Accepted Answer · 2019-08-27 15:35:02Z

This happens because you are replacing the values in your state for each part of your data.

You can filter out the element you want in your array using filter.

And then put the whole array into your state only once :

const api_call = await fetch(`https://waterlevel.ie/geojson/latest/`)
.then(response1 => {
  response1.json().then(data => {
    const features = Array.from(data.features)
      .filter(el => el.properties['station.name'] === name);
    this.setState({ features });
  })
});

But now, to render all of them, you will need to map your state values :

   render(){
    return(
      <div>
        <Tiles />
        <Form loadData={this.getData}/>
        {this.state.features.map(feat => <WaterData 
           key={/* Find something unique*/}
           station_name={feat.properties['station.name']}
           water_value={feat.properties['value']}
           dateTime={feat.properties['datetime']}
        />)}
      </div>
    )
  }

There's no need to store all the value separately in your state if they are related to each other, it would be fine for your child component though.

To be sure that the state value is always an array, give it an empty array at the start of your class :

  state = {
    features: []
  }

Thanks for this its almost there, its now state my state is undefined? cannot read property map of undefined
Oh, right, this will make your component crash until the state changes, check out my edit. You could also put this.state.features && this.state.features.map( in your render as an alternative

Collectives™ on Stack Overflow

Displaying Multiple API Responses in React

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related