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