Access this.state values from child component

Question

I am having trouble passing date values from a react-dates component to it's parent component.

Firstly, I would normally handle such a task with Redux but it's overkill for the project and would prefer a simple solution.

How can I pass onChange events from DateRangePicker to it's parent component?

Parent Component

...    
import DateRangePicker from './DatepickerRates'

class Rates extends Component {
    constructor(props) {
        super(props);
        this.state = { }
    }

    onChange(startDate, endDate) {
        this.setState({[startDate]: startDate});
        this.setState({[endDate]: endDate});
    }

    render() {
        console.log(`In ${this.state.startDate} - Out ${this.state.endDate}`)

        return (
            <Wrapper>
              <DateRangePicker onChange={this.onChange.bind(this)}/>
            </Wrapper>
        );
    }
}
export default Rates;

DateRangePicker

...
class DateRangePickerWrapper extends Component {
    constructor(props) {
        super(props);
        this.state = {
            focusedInput,
            startDate: props.initialStartDate,
            endDate: props.initialEndDate,
        }
        this.onDatesChange = this.onDatesChange.bind(this);
        this.onFocusChange = this.onFocusChange.bind(this);
    }

    onDatesChange({ startDate, endDate }) {
        const { stateDateWrapper } = this.props;
        this.props.onChange('startDate', this.state.startDate);
        this.props.onChange('endDate', this.state.endDate);
        this.setState({
          startDate: startDate && stateDateWrapper(startDate),
          endDate: endDate && stateDateWrapper(endDate),
        });
    }

    render() {
        const { startDate, endDate } = this.state;

        ...

        return (
            <div>
                <DateRangePicker
                    {...props}
                    onDatesChange={this.onDatesChange}
                    onFocusChange={this.onFocusChange}
                    focusedInput={focusedInput}
                    startDate={startDate}
                    endDate={endDate}
                />
            </div>
        );
    }
}

export default DateRangePickerWrapper;

on your parent component set a prop like `onDateSelect={this.handleChange}` and in child component onChange do `this.props.onDateSelect(selectedVal);` and you will get the data in `handleChange()`...this is a way..but try to use redux — Aravind S, Jun 28 '18 at 08:45
Cheers @AravindS. I shall give it a go - I was under the impression that Redux would require more time but this is starting to work against that thought. — Darren, Jun 28 '18 at 09:11
I have and still getting `undefined` on the `startDate` and `endDate` in the parent component. Could you possibly give the above in an answer. I feel that I may have misunderstood. Cheers. — Darren, Jun 28 '18 at 09:24
Here is a Sandbox of the full script if that helps https://codesandbox.io/s/q3vpymvlo9 — Darren, Jun 28 '18 at 10:11
check out this. https://codesandbox.io/s/vqw83my5l0 and let me know @darren — Aravind S, Jun 28 '18 at 10:38
Thanks @AravindS. It works on codesandbox but not in my build https://gracious-allen.netlify.com/varenna/information/ — Darren, Jun 28 '18 at 10:55
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/173963/discussion-between-aravind-s-and-darren). — Aravind S, Jun 28 '18 at 10:56

score 1 · Accepted Answer · answered Jun 28 '18 at 10:56

here is working demo - https://codesandbox.io/s/vqw83my5l0 on your parent component set a prop like onChange={this.handleDropDownChange} and in child component onChange of date, in onDatesChangeand function set this.props.onChange(startDate, endDate) and you will get the data in handleDropDownChange()

score 0 · Answer 2 · answered Jun 28 '18 at 10:13

Pass the onChange function as a props to the child component like this

import DateRangePicker from './DatepickerRates'
class Rates extends Component {
constructor(props) {
    super(props);
    this.state = {
        startDate: '',
        endDate: '',
    }

}

onChange = (startDate, endDate) => {
    this.setState({
        startDate: startDate,
        endDate: endDate
    });
}

render() {
    ...
    return (
        <Wrapper>
          <DateRangePicker
            onChange={this.onChange}/>
        </Wrapper>
    );
}
}
export default Rates;

then from the child component modify your onDatesChange function to

   onDatesChange({ startDate, endDate }) {
    const { stateDateWrapper } = this.props;
    console.log('startDate: ', startDate)
    console.log('endDate: ', endDate)
    this.props.onChange(startDate, endDate);
    this.setState({
      startDate: startDate && stateDateWrapper(startDate),
      endDate: endDate && stateDateWrapper(endDate),
    });
}

note I have added logs to check if you are receiving the start and end date values

Access this.state values from child component

2 Answers2