Render a React component from a button click event

Question

I'm developing a small react application that consist of a chart component and some other components. The chart component is a separate file/component/child component.When i click the button in the main container it calls a promise (using axio) and it returns some data as response. This response data is set as states and that state is passed to the chart component as props.But the chart doesn't load. This is because the chart has already being loaded, since the initial states where empty the chart is also empty. Is there any way of rendering the chart component only after the promise returns data?

this is my code

the button click event

  ClickMe = () =>{

         axios.get('http://xyzsdsd.com/abc')
            .then((response)=>{

               this.setState({
                 tags:response.data
               });

               console.log(this.state.tags);

            }).catch((err)=>{

              console.log(err);
            });


  }

the render function

  render(){
        return(
        <div>
         <otherComponents/>
         <chart data={this.state.tags}/>
        </div>

         );
}

If you continue using React in that way, you're going to run into countless headaches. You should look into Flux and popular implementation/adaptation redux. Many people think React is a fully-featured framework like Angular – it's not. React is a small library that handles a very specific part of your front-end apps. React has given you the freedom to choose the other tools you want to accomplish other tasks like fetching data, maintaining a large application state, routing, etc. — Mulan
– Mulan, Commented Nov 10, 2016 at 18:17

Jeff McCloud · Accepted Answer · 2016-11-10 18:05:35Z

3

Add a condition in your render, to only render the chart component when your state.tags object is valid. On initial render, chart will not be rendered. When your AJAX call returns and setState() is called, render() will be called again with a non-null state.tags and thus render your chart.

render(){
  let chart;

  if (this.state.tags) {
    chart = <chart data={this.state.tags}/>;
  }

  return (
    <div>
      <otherComponents/>
      {chart}
    </div>
  );
}

answered Nov 10, 2016 at 18:05

Jeff McCloud

5,9671 gold badge22 silver badges21 bronze badges

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

1 Comment

fingerpich Over a year ago

or set initial data for chart in constructor

silverfighter · Accepted Answer · 2016-11-10 18:31:52Z

1

for good UX you might want to think about the different states and flows that your component or piece of the UI might encounter.

So from the top of the head I would have 3 states. Empty slate, loading (since your reaching out to the server this could also take some time) and chart with data.

So depending on the state you might want to display different components.

I would set the InitialState for in ES6 via constructor or without ES6 in the getInitialState function.

If you want to kick of the ajax onLoad of the component axios.get you should think about placing the componentDidMount. This could also work with the React-Router. So whenever you navigate to the ChartComponent it loads when it gets mounted.

If you happen to recognize that your if statements in your render function get to complicated because you business logic demands for more. You should definitely check out Redux (http://redux.js.org/)in combination with React to have better control of state and data flow.

Really great insides how to structure react apps with redux could be found in this free video series. https://egghead.io/courses/getting-started-with-redux https://egghead.io/courses/building-react-applications-with-idiomatic-redux

Hope that helps.

answered Nov 10, 2016 at 18:31

silverfighter

6,89212 gold badges52 silver badges76 bronze badges

1 Comment

TRomesh Over a year ago

well it seems i dont have any other alternative than using flux or redux. anyway thanks.

Collectives™ on Stack Overflow

Render a React component from a button click event

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related