Getting Expected onMountComponent() to fire for the child before its parent includes it in onSetChildren().

[ronaksvyas]

This is my class for daterangepicker:

` export default class DateRange extends Component{

constructor(props){
    super(props);
    this.state = {
        startDate: moment().startOf('month'),
        endDate: moment().endOf('month')
    };
    this.handleEvent = this.handleEvent.bind(this);
    this.getValue = this.getValue.bind(this);
}

componentDidMount(){
    //to put initial dates in state as default
    this.props.onDateRangeChange(this.state.startDate.format("YYYY-MM-DD H:m:s"), this.state.endDate.format("YYYY-MM-DD H:m:s"));
}

handleEvent(event, picker){
    this.setState({
        startDate: picker.startDate,
        endDate: picker.endDate
    });
    this.props.onDateRangeChange(this.state.startDate.format("YYYY-MM-DD H:m:s"), this.state.endDate.format("YYYY-MM-DD H:m:s"));
}

getValue(){
    return this.state.startDate.format('ll') + ' - ' + this.state.endDate.format('ll');
}

render(){
    return (
        <FormGroup className="col-xs-3">
            <DateRangePicker startDate={this.state.startDate} endDate={this.state.endDate} onEvent={this.handleEvent}>
                <ControlLabel>Select Date Range</ControlLabel>
                <FormControl 
                    componentClass="input" 
                    value={this.getValue()}
                    readOnly
                />
        </DateRangePicker>
        </FormGroup>
    );
}

}`

Recently I have started getting this: Warning: Exception thrown by hook while handling onSetChildren: Invariant Violation: Expected onMountComponent() to fire for the child before its parent includes it in onSetChildren().

I have narrowed it down to this component. Please help.

[skratchdot]

I just recently pulled in the following commit: https://github.com/skratchdot/react-bootstrap-daterangepicker/pull/133/files

I can't find the issue that asked me to pull it in. but someone was requesting this.

Can you try to fix by adding a <div /> as the direct child of DateRangePicker? It appears that the DateRangePicker only allows a single child element now. Perhaps:

render() {
  return (
    <FormGroup className="col-xs-3">
      <DateRangePicker
        startDate={this.state.startDate}
        endDate={this.state.endDate}
        onEvent={this.handleEvent}
      >
        <div>
          <ControlLabel>Select Date Range</ControlLabel>
          <FormControl
            componentClass="input"
            value={this.getValue()}
            readOnly
          />
        </div>
      </DateRangePicker>
    </FormGroup>
  );
}

will work?

[ronaksvyas]

Okay. I will try this. I fixed this error by downgrading to version 3.3..0. Just trial and error.

[skratchdot]

closing this due to inactivity. please re-open if this is still an issue in v6.0.0 or greater