trying to set the state of react-highcharts, but it isn't working?

Question

As stated in the title, how to set the data with a state value in react for highcharts? The value of this.state.number is 0 / undefined

CODE

getFirstMonthOpenEnhancements(){
    fetch(`http://ca-fpscfb2:4000/1stMonthOpenedEnhancements?airline=${this.state.airlineName}&product=${this.state.airlineProduct}`)
    .then(response => response.json())
    .then( response =>  
        this.setState(
        { 
          number: parseInt(response.data.total) 
        }
    ))

    .catch(err => console.error(err))
  }
 componentDidMount(){
    this.getFirstMonthOpenEnhancements();
    let chart = this.refs.chart.getChart();
    chart.series[4].setData([this.state.number, 4, 4, 4]);
 }

where is the code for when you set the value of the `state.number` property? that way we will know why its 0 or undefined — Shawn Andrews, Nov 19 '18 at 23:05
I am basically fetching data from an api and then settings state, then trying to get the number, but the number is always 0 or undefined, however, when i put this.state.number in the render method, the number appears — bobb1213131, Nov 19 '18 at 23:11
are you verifying the data returned from the api and `parseInt(response.data.total) ` is a value not 0 or undefined? you can do this by inserting a `console.log(parseInt(response.data.total));` before this.setState(...) — Shawn Andrews, Nov 19 '18 at 23:15
_when_ is it 0/undefined? The code you show kicks off during `componentDidMount`, e.g. at the time of first render() (and unless your initial state assigned some `number: ...`, that means `this.state.number` will be undefined during that render). Then it's an async fetch, so the _eventual_ setState will trigger a rerender, at which time `this.state.number` _will_ exist. So... when are we talking? — Mike 'Pomax' Kamermans, Nov 20 '18 at 00:18
hello @Mike'Pomax'Kamermans thanks for clarifying what is actually happening in my code, so since it is asynchronous, the fetch will run after setting the data in my data, how would you go through to fix this problem? — bobb1213131, Nov 20 '18 at 02:11
either have the component that builds this one first get the data, then build this component once it's available, or make this component have the `number` state variable, with 0 as content, and a `loading` state variable so you can make sure to render UI that indicates it's not done loading its remote data yet. — Mike 'Pomax' Kamermans, Nov 20 '18 at 16:07

score 1 · Accepted Answer · answered Nov 19 '18 at 23:37

The this.state.number property is undefined because your API request is asynchronous, so when you are asking for the value of this.state.number its undefined because your API call hasn't returned yet.

Theres a couple different solutions but in my opinion the most elegant is returning a promise.

getFirstMonthOpenEnhancements(){
    return new Promise((resolve, reject) => {
        fetch(`http://ca-fpscfb2:4000/1stMonthOpenedEnhancements?airline=${this.state.airlineName}&product=${this.state.airlineProduct}`)
        .then(response => response.json())
        .then( response =>  
            return resolve(parseInt(response.data.total))
        ))
        .catch((err) => { return reject(err) });
    });
}

componentDidMount(){
    this.getFirstMonthOpenEnhancements()
    .then((someNumber) => {
        let chart = this.refs.chart.getChart();
        chart.series[4].setData([someNumber, 4, 4, 4]);
        this.setState({ number: someNumber });
    })
    .catch((err) => { console.log(err); });
 }

Also, can you take a look at my other problem im having in other application it is unrelated to this issue, but if ud be able to help with this problem thatd be great, :D, **https://stackoverflow.com/questions/53382193/trying-to-loop-through-an-object-that-has-2-array-values-in-react-js-in-order-to** — bobb1213131, Nov 20 '18 at 02:15

trying to set the state of react-highcharts, but it isn't working?

1 Answers1