Fetch values from api and display in reactjs app piechart

Question

I made API from where I am returning values and now am trying to take fetch those values and display in pie chart using reactjs but am not able to fetch.


class Graph extends Component {
    ComponentWillMount(){
        fetch('http://localhost:3010/analysis')
        .then(response{response.json()})
        .then(data => console.log(response))
    }
    render() {
        return (
            <ReactFC
        {...pieConfigs}/>
            );
    }
}

export default Graph;

This is my code. Can anyone please tell me what are the changes I need to make to be able to display pie chart in react app?

If you want how to configure chart - npmjs.com/package/react-fusioncharts — ravibagul91
– ravibagul91, Commented Jul 15, 2019 at 7:14
Also make you API call in componentDidMount and instead of console.log set the data to state which can be used for chart configuration. — ravibagul91
– ravibagul91, Commented Jul 15, 2019 at 7:15

Anh Tuan · Accepted Answer · 2019-07-15 09:18:56Z

1

the problem is you fetch API right after component unmount, try

ComponentDidMount(){
    fetch('http://localhost:3010/analysis')
    .then(response{response.json()})
    .then(data => console.log(response))
}

answered Jul 15, 2019 at 9:18

Anh Tuan

1,1436 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

NCM · Accepted Answer · 2019-07-16 02:16:17Z

0

Example:

class Graph extends Component {
    state = { pieConfigs }
    componentDidMount(){
        fetch('http://localhost:3010/analysis')
        .then(response => response.json())
        .then(data => this.setState({ data }))
    }
    render() {
        return (
            <ReactFC {...this.state.pieConfigs}/>
        );
    }
}

Explanation:
1. Fetching data from componentDidMount, not componentWillMount. You can see this article as reference.
2. Use state/props for data related to ui. You can use state and setState to update the data and pass it as props to ReactFC. Updating state or props will trigger re-render, so that the ui will be up-to-date.

edited Jul 16, 2019 at 2:16

answered Jul 15, 2019 at 9:22

NCM

3681 silver badge4 bronze badges

Collectives™ on Stack Overflow

Fetch values from api and display in reactjs app piechart

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related