How to render Child Component by Click event from Parent Component?

Question

I'm trying render Child Component by Click event from Parent Component. This is the Parent Component. I choose a start date and end date in Parent Component.

 handleStartDateChange = (e, date) => {
    this.setState({ startDate: date });
}
 ...
 handleFilterClick = () => {
        let urlGetCashListByDate = urlGetCashList + '?starttime=' + this.state.startDate +'&endtime=' + this.state.endDate;
        let urlGetOrderListByDate = urlGetOrderList + '?starttime=' + this.state.startDate + '&endtime=' + this.state.endDate;  
 }
 render() {
 return ( 
         <DatePicker
          id="start-date"
          onChange={this.handleStartDateChange}/>)
         <DatePicker
          id="end-date"
          hintText="End Date"
          onChange={this.handleEndDateChange}/>
         <RaisedButton
          onClick={this.handleFilterClick}/> 

         <OrderList/>
         <CashList/>        
 )}

Here is Child Component:

class OrderList extends Component{
    componentDidMount(){
       this.props.getOrderList(urlGetOrderList);
}

And CashList child Component:

class CashList extends Component{
        componentDidMount(){
           this.props.getCashList(urlGetCashList);
}

How can I render Child Component with new Url of Parent Component like this? (in CashList Component)

this.props.getCashList(urlGetCashListByDate)

I know passing a state, but my problem is url. Thank you.

score 0 · Accepted Answer · answered Jan 09 '18 at 04:41

Using the same urlGetOrderList & urlGetCashList variables, assuming they're defined somewhere (they should correspond to the base URL for either queries):

constructor(props) {
  super(props);

  this.state = {
    startDate: null,
    endDate: null,
    ...
    urlParams: ''
  };
}

handleStartDateChange = (e, startDate) => {
  this.setState({ startDate });
}
...
handleFilterClick = () => {
  this.setState({ urlParams: `?starttime=${this.state.startDate}&endtime=${this.state.endDate}` });
}
render() {
  return ( 
    <DatePicker
      id="start-date"
      onChange={this.handleStartDateChange} />
    <DatePicker
      id="end-date"
      hintText="End Date"
      onChange={this.handleEndDateChange} />
    <RaisedButton
      onClick={this.handleFilterClick} /> 

    <OrderList url={urlGetOrderList + this.state.urlParams} />
    <CashList url={urlGetCashList + this.state.urlParams} />        
  );
}

In your OrderList component:

class OrderList extends Component {
  ...
  retrieveList(url) {
    this.props.getOrderList(url);
  }
  componentDidMount() {
    this.retrieveList(this.props.url);
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.url !== this.props.url) {
      this.retrieveList(nextProps.url);
    }
  }
}

And the same in your CashList component.

How to render Child Component by Click event from Parent Component?

1 Answers1