react access child state

Question

I have a component called AvailabiltyCalender and it has a child component called DatePicker. The Chile component has a state called focusedInput. I need to access that state from the AvailabiltyCalender component and get that state value. How can i do that.

AvailabiltyCalender component

import React, { Component } from 'react';
import './AvailabilityCalender.css';
import backArrow from '../../../assets/images/back.png';

import DatePicker from '../../Common/DatePicker/DatePicker';

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import PropTypes from "prop-types";

import moment from 'moment';

class AvailabiltyCalender extends Component {
    componentWillReceiveProps(nextProps) {
    }

    render() {

        const { checkInOutDates: { checkInDate, checkOutDate } } = this.props;

        let checkIn = checkInDate.format('ddd DD MMM');
        let checkOut = checkOutDate.format('ddd DD MMM');

        return (
            <div className="full_width checkin_checkout_wr">
                <DatePicker />
            </div>
        );
    }
}

AvailabiltyCalender.propTypes = {
    checkInOutDates: PropTypes.object.isRequired
};

function mapStateToProps(state, ownProps) {

    const dates = state.searchPageReducer.checkInOutDates;

    const checkDates = {
        checkInDate: moment(dates.checkInDate),
        checkOutDate: moment(dates.checkOutDate)
    }

    return {
        checkInOutDates: checkDates,
    };
}

export default connect(mapStateToProps)(AvailabiltyCalender);

DatePicker Component

import React, {Component} from 'react';
import 'react-dates/initialize';
import {DateRangePicker, SingleDatePicker, DayPickerRangeController} from 'react-dates';
import 'react-dates/lib/css/_datepicker.css';
import './DatePicker.css';
import moment from "moment";

import {connect} from "react-redux";
import PropTypes from "prop-types";
import {bindActionCreators} from "redux";
import * as searchPageActions from "../../../pages/Search/searchPageActions";



class DatePicker extends Component
{
    constructor(props)
    {
        super(props);

    let check_in = moment(this.props.checkInOutDates.checkInDate);
    let check_out = moment(this.props.checkInOutDates.checkOutDate);

    this.state = {
        startDate: check_in,
        endDate: check_out,
    };

    this.onDatesChange = this.onDatesChange.bind(this);
}

onDatesChange({ startDate, endDate }) {
    this.setState({ startDate, endDate });
    this.props.actions.retrieveCalendarResults({
        checkInDate: startDate,
        checkOutDate: endDate,
    });


        // if(this.state.focusedInput === 'endDate'){

        // }


}

render()
{
    const { focusedInput } = this.state;

    const { checkInOutDates: { checkInDate, checkOutDate} } = this.props

    return (
        <div className="DateRangePickerInput DateRangePickerIcon">
            <DateRangePicker
                    startDate={checkInDate} 
                    startDateId="checkin_date_id" 
                    endDate={checkOutDate}
                    endDateId="checkout_date_id"
                    onDatesChange={({ startDate, endDate }) => this.onDatesChange({ startDate, endDate }) }
                    focusedInput={this.state.focusedInput}
                    onFocusChange={focusedInput => this.setState({focusedInput}) }
                    orientation="vertical" withFullScreenPortal
                    startDatePlaceholderText="Checkin"
                    endDatePlaceholderText="Checkout"

            />
        </div>
    );

}
}

DatePicker.propTypes = {
    checkInOutDates: PropTypes.object.isRequired
};


function mapStateToProps(state, ownProps)
{
    const dates = state.searchPageReducer.checkInOutDates;

    const checkDates = {
        checkInDate: moment(dates.checkInDate),
        checkOutDate: moment(dates.checkOutDate)
    }

    return {
        checkInOutDates: checkDates
    };
}

function mapDispatchToProps(dispatch)
{
    return {
        actions: bindActionCreators(searchPageActions, dispatch)
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(DatePicker);

You have not initialised `focusedInput` in `this.state` object in constructor — Agney, Feb 17 '18 at 18:22

score 0 · Answer 1 · answered Feb 17 '18 at 18:26

0

As it's mentioned here : https://stackoverflow.com/a/46633043/8489245 ? You can get child state with event that you can trigger in a child and listen it in parent with a callback!

Hope it help you!

answered Feb 17 '18 at 18:26

Aboubacar Ouattara

511
1
6
18

score 0 · Answer 2 · answered Feb 17 '18 at 18:36

Short Answer: You don't.

In React, state only flows one way. From parent component to the state. So if you would like to access something in the child, you have to keep the state in the parent component and pass it down to the child as Props.

If the child needs to change the Prop that is passed to it, it can call a function that is to be passed as prop from the parent component.

You can read about the pattern here.

class Child extends React.Component {
  constructor(props) {
    super(props);
  }
  componentWillReceiveProps(nextProps) {
    //Perform any computations you want to perform with new prop here
  }
  render() {
    const {value, toggle} = this.props;
    return (
      <div class="child">
        <span>Child: {value.toString()} </span>
        <button onClick={toggle}>Toggle in Child</button>
      </div>
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: true
    };
    this.toggle = this.toggle.bind(this);
  }
  toggle() {
    this.setState((prevState)=>{
      return {
        value: !prevState.value
      }
    });
  }
  render() {
    return (
      <div>
        <Child value={this.state.value} toggle={this.toggle} />
        <button onClick={this.toggle}>Toggle</button>
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

react access child state

2 Answers2