1

I'm kinda new with react. I have made a REST API in go which send a JSON like this

[{Key1: value1, Key2: value2},{Key1: value3, Key2: value4},{Key1: value5, Key2: value6}]

The react component which call the API looks like this

import React from "react";
import axios from "axios";

class State extends React.Component {

constructor(props) {
    super(props);
    this.state={
        graph_data:[{
            Indication: '',
            IsOpen: '',
            Number: 0
        }],
    };
}

componentDidMount() {
    const res=[]
    axios.get('http://127.0.0.1:8080/watch/1.0.0/state')
        .then(response => {
            for(let x = 0; x < response.data.length; x++) {
                res[x] = response.data[x];
                console.log(res[x])
            }
        });
       console.log(res[2])
}

render() {
    const { graph_data } =this.state.graph_data;
    return (
        <div className="graph-wrapper">
            <div className="graph">
                <h3>{ graph_data }</h3>
            </div>
        </div>
    )
}
}

export default State;

The value graph_data in <h3></h3> is empty, how can I make it get the JSON data? console.log(res[x]) shows me the value of the list at the x value but the console.log(res[2]) after is empty Thanks

Tim
  • 31
  • 1

0 Answers0