title: Set state of parent from child component
body: <p>I am working on this for hours now and I don't know what I have to do to make it work.</p>
  
  <p>I have a parent component that has a child which is a modal dialogue. This dialogue has a date picker that has two attributes <code>focused</code> and <code>onFocusChange</code>.</p>
  
  <p>The relevant parts of the parent component before the <code>render()</code> method:</p>
  
  <pre><code>class Terminkalender extends Component {
    constructor(props) {
      super(props);
      this.toggle = this.toggle.bind(this);
      this.setEventData = this.setEventData.bind(this);
      this.selectElementPatient = this.selectElementPatient.bind(this);
      this.handleDateChange = this.handleDateChange.bind(this);
      this.toggleFocus = this.toggleFocus.bind(this);
      moment.locale('de');
      this.state = {
        patient: null,
        appointments: [{end: '2018-08-25T11:57:27.512Z', title: 'TEST', start: '2018-08-25T11:57:27.512Z'}],
        time: '10:00',
        inputValue: ''
      }
    }
  
    componentDidMount() {
      this.setState({
        appointments: this.state.appointments.map(a =&gt; Object.assign({}, a, { end: new Date(a.end), start: new Date(a.start) })),
      });
    }
  
    setEventData(event) {
      this.setState({
        timeStart: event.start.getHours() + ":" + event.start.getMinutes(),
        timeEnd: event.end.getHours() + ":" + event.end.getMinutes(),
        date: event,
        disabled: true,
        modal: !this.state.modal
      });
    }
  
    toggle() {
      this.setState({
        modal: !this.state.modal
      });
    }
  
    handleDateChange(newDate) {
      this.setState({
        date: newDate
      });
    }
  
    toggleFocus(toggleFocused) {
      this.setState({
        focused: !this.state.focused
      });
    }
  </code></pre>
  
  <p>The child component in the parent component:</p>
  
  <pre><code>&lt;AppointmentModal
      focused={this.state.focused}
      toggleFocus={this.toggleFocus}
      patient={this.state.patient}
      handleDateChange={this.handleDateChange}
      date={this.state.date}
   /&gt;
  </code></pre>
  
  <p>Here is the date picker that uses <code>focused</code> and <code>toggleFocus()</code>:</p>
  
  <pre><code>  &lt;SingleDatePicker
       inputIconPosition="after"
       block={false}
       numberOfMonths={1}
       date={this.props.date ? moment(this.props.date): null}
       onDateChange={date =&gt; this.props.handleDateChange(date)}
       focused={this.props.focused}
       onFocusChange={this.props.toggleFocus}
     /&gt;
  </code></pre>
  
  <p>The problem I have now, is that the opening mechanism that is toggled by the function <code>toggleFocus</code> doesn't seem the work. When I click on the field of <code>SingleDatePicker</code> I can see in the console that <code>focused</code> is set two times to <code>true</code>. </p>
  
  <p>What do I need to change so that if I click on the field and trigger the <code>toggleFocus()</code> function, I set <code>focused</code> to <code>true</code> and when I click out or click one date, it is set to <code>false</code>.</p>
  
  <p>EDIT: The <code>SingleDatePicker</code> is from <code>react-dates</code>.</p>
  
  <p>EDIT2, the render() method: </p>
  
  <pre><code>render() {
      return (
        &lt;div className="animated"&gt;
          &lt;Card&gt;
            &lt;CardBody style={{height: '50em'}}&gt;
              &lt;Button type="submit" size="sm" color="success" className="mb-3 p-1"&gt;&lt;i className="fa fa-plus"&gt;&lt;/i&gt;  Neuer Termin&lt;/Button&gt;
              &lt;BigCalendar className="d-sm-down-none"
                {...this.props}
                selectable
                events={this.state.appointments}
                views={['month', 'week', 'day']}
                step={15}
                defaultDate={new Date(currYear, currMonth, 1)}
                defaultView='week'
                toolbar={true}
                messages={{month:"Monat", week:"Woche", day:"Tag", today:"Heute", previous:"Zurück", next:"Weiter"}}
                culture="de"
                onSelectSlot={this.setEventData}
                onSelectEvent={this.setEventData}
              /&gt;
              &lt;BigCalendar className="d-md-none"
                {...this.props}
                selectable
                events={this.state.appointments}
                views={['day']}
                step={15}
                defaultDate={new Date(currYear, currMonth, 1)}
                defaultView='day'
                toolbar={true}
                messages={{day:"Tag"}}
                culture="de"
              /&gt;
              &lt;AppointmentModal
                timeStart={this.state.timeStart}
                timeEnd={this.state.timeEnd}
                modal={this.state.modal}
                onChange={this.toggle}
                selectElementPatient={this.selectElementPatient}
                focused={this.state.focused}
                toggleFocus={this.toggleFocus}
                patient={this.state.patient}
                handleDateChange={this.handleDateChange}
                date={this.state.date}
              /&gt;
            &lt;/CardBody&gt;
          &lt;/Card&gt;
        &lt;/div&gt;
      );
    }
  </code></pre>
  
  <p>EDIT 3: The <code>AppointmentModal</code>component:</p>
  
  <pre><code>class AppointmentModal extends Component {
    constructor(props) {
      super(props);
    }
  
    render() {
  
      return (
        &lt;Modal isOpen={this.props.modal} toggle={this.props.onChange}&gt;
          &lt;ModalHeader toggle={this.props.onChange}&gt;Neuer Termin&lt;/ModalHeader&gt;
            &lt;ModalBody&gt;
              &lt;FormGroup row&gt;
                &lt;Col md="3"&gt;
                  &lt;Label htmlFor="anfang"&gt;Zeit:&lt;/Label&gt;
                &lt;/Col&gt;
                &lt;Col xs="12" md="9"&gt;
                  &lt;SingleDatePicker
                    inputIconPosition="after"
                    block={false}
                    numberOfMonths={1}
                    date={this.props.date ? moment(this.props.date): null}
                    onDateChange={date =&gt; this.props.handleDateChange(date)}
                    focused={this.props.focused}
                    onFocusChange={this.props.toggleFocus}
                    openDirection="down"
                    hideKeyboardShortcutsPanel={true}
                    placeholder="Tag"
                    displayFormat={() =&gt; moment.localeData().longDateFormat('L')}
                  /&gt;
                &lt;/Col&gt;
              &lt;/FormGroup&gt;
            &lt;/ModalBody&gt;
            &lt;ModalFooter&gt;
              &lt;Button color="primary" onClick={this.props.onChange}&gt;Speichern&lt;/Button&gt;{' '}
              &lt;Button color="secondary" onClick={this.props.onChange}&gt;Abbrechen&lt;/Button&gt;
            &lt;/ModalFooter&gt;
          &lt;/Modal&gt;
      );
    }
  }
  
  export default AppointmentModal;
  </code></pre>