ajaxreactjsaxios

React axios data and multi component search


Hi I am using axios to fetch JSON data in React, the issue is that I am not able to search within the fetched data.

I tried fetching the data in the parent component but the request is asynchronous so it loads child components first and then fetches data.

Below is my code :

  axios.get("/url.json")
    .then(function(result) {
      teams= result.data.teams
  });

ReactDOM.render(
<div>
  <App teams={teams}/>
</div>
,document.getElementById('app')
)

If I fetch data using axios inside the child component how do I save the data for search? i.e I need to search in the unfiltered data.


Solution

  • Call ReactDOM.render after request succeeding : I mean inside the callback of axios NOT out side.

     axios.get("/url.json")
        .then(function(result) {
          const teams= result.data.teams;
          ReactDOM.render(
            <div>
             <App teams={teams}/>
            </div>
           ,document.getElementById('app')
         )
      });
    

    ..... OR.....

    As BEST PRACTICES, you can add another layer (super-parent) which handles this call inside its componentDidMount :

    class Root extends React.Component {
    
       constructor() {
         super(...arguments);
         this.state= {teams : []};
       }
       componentDidMount() {
         axios.get("/url.json")
            .then((result) => {
              this.setState({teams: result.data.teams})
          });
       }
    
      render() {
    
        return (
            <div>
              <App teams={this.state.teams}/>
            </div>
         )
       }
    
    
    }
    
     ReactDOM.render(
        <Root />
       ,document.getElementById('app')
    )