I've stored url and a token in state in Parent component. I'm passing an url and a token as props from parent Component to child Component. However, if there is some event in parent Component, setState() is triggered and as a result, componentDidUpdate() of child Component gets executed.

As componentDidUpdate() was causing an infinite loop (as it triggers setState() inside child component), I've placed condition. But this does not prevent the error.

Child Component ie DisplayRevenue is as follows:

import React, { Component } from 'react';

import '../App.css';

import ListData from './listdata.js'

var axios = require('axios');



class DisplayRevenue extends Component {



  constructor(props){

    super(props);

    this.state = { data:[], url: }

  console.log(this.props.url);

  }



  componentWillMount() {

    this.loadRevenue(this.props.url, this.props.token);

 }



  componentDidUpdate(){    //creates infinite loop

  //  console.log(this.props.url);

    this.loadRevenue(this.props.url, this.props.token);

  }



  setData(data){

    //if(this.state.url != this.props.url){

    if(this.state.data != data.data){

      console.log(data.data);                     //(1)

  //    console.log(this.state.url);              //(2)

      this.setState(data:data);             

      console.log(this.state.data);               //(3)

  //    console.log(this.props.url);              //(4)

    }     //(1) & (3) yields exactly same value so does (2) & (4)

  }



  loadRevenue(url,token){

    axios({

      method:'get',

      url:url,

      headers: {

        Authorization: `Bearer ${token}`,

      },

    })

     .then( (response) => {

    //   console.log(response.data);

       this.setData(response.data);

     })

     .catch(function (error) {

       console.log(Error in loading Revenue +error);

     });

  }



  render() {

    return (

      <ListData data={this.state.data}/>

    );

  }

};



export default DisplayRevenue;

Parent Component ie MonthToDate is as below:

import React, { Component } from 'react';

import '../App.css';

import DisplayRevenue from './displayRevenue'

var axios = require('axios');



class MonthToDate extends Component {



  constructor(props){

    super(props);

    this.state = {

      data:null,

      url:http://localhost:3000/api/monthtodate

    }

    //console.log(this.props.location.state.token);

  }



  groupBySelector(event){

    if ((event.target.value)===invoice){

      this.setState({url:http://localhost:3000/api/monthtodate})

    } else if ((event.target.value)===customer) {

      this.setState({url:http://localhost:3000/api/monthtodate?group-by=customerNumber})

    } else if ((event.target.value)===month) {

      this.setState({url:http://localhost:3000/api/invoices?group-by=month})

    } else {

      this.setState({url:http://localhost:3000/api/monthtodate})

    }

    console.log(this.state.url);

  }



  render() {

    return (

      <div>

      <select onChange={(event)=>this.groupBySelector(event)}>

        <option value=invoice>GROUP BY INVOICE</option>

        <option value=customer>GROUP BY CUSTOMER</option>

        <option value=month>GROUP BY MONTH</option>

      </select>

        <DisplayRevenue url={this.state.url} token={this.props.location.state.token}/>

      </div>

    );

  }

}



export default MonthToDate;

• What am I missing?


• Also, after I've received the url in the child component I want to render different component based on that url. For example <ListData /> component can handle only one type of url. How can I render another component within render() based on the url type??