onChange event for React child component to update state

Question

I'm trying to learn how to implement a React form (ES6 syntax) and pass the onChange events for each field up to a controller parent component which is responsible for updating the state. This works fine for standard html elements, however I am trying a pre-canned Datepicker (https://www.npmjs.com/package/react-bootstrap-date-picker) for a date field and can't readily pass the event back up to the parent in the same way. Is there a simple way to address this?

Controller Component

   class Parent extends React.Component {
    constructor (props) {
        super(props);
        this.state = {job: ''} 
    }

    setJobState(event) {
        var field = event.target.name;
        var value = event.target.value;
        this.state.job[field] = value;
        this.setState({job: this.state.job});
    }


    render () {
        return <Child onChange={this.setJobState.bind(this)} />
    }
}

Child Component

class Child extends React.Component {
    constructor (props) {
        super(props);

    }

    render () {
        <form>
         <input type="text" name="jobNumber" onChange={this.props.onChange} /> 
         <DatePicker name="dateCmmenced" onChange={this.props.onChange}  />
        </form>
    }
}

Looks like you're binding the onChange handler correctly, but the onChange handler for the DatePicker is called with two parameters: value and formattedValue (see here: github.com/pushtell/react-bootstrap-date-picker#datepicker-). In your Child component just set different handlers for the two onChange events, that are able to handle the difference in arguments. — forrert
I'll give that a try and see if I can get it to work. Thanks. — Han Uman
Also be careful how you update the state. this.state.job[field] = value is not how you should update your state. Always make state changes by calling this.setState. — forrert
Based on the parameters from the DatePicker component, the best I could come up with was the following, but I am a js novice, so yeah: setJobState(event) { if (typeof event === 'object') { var field = event.target.name; var value = event.target.value; this.state.job[field] = value; } else if (typeof event === 'string') { this.state.job.dateCommenced = event; } return this.setState({ job: this.state.job }); } — Han Uman

forrert forrert · Accepted Answer · 2016-11-28T19:14:49

The onChange handler for the DatePicker is not called with a standard browser change event, but with value and formattedValue as arguments. I would recommend to register different onChange handlers in your Child component that transform the respective input field's event:

Controller Component

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

    onChange(field, value) {
        // parent class change handler is always called with field name and value
        this.setState({[field]: value});
    }


    render () {
        return <Child onChange={this.onChange.bind(this)} />
    }
}

Child Component

class Child extends React.Component {
    constructor (props) {
        super(props);
    }

    onFieldChange(event) {
        // for a regular input field, read field name and value from the event
        const fieldName = event.target.name;
        const fieldValue = event.target.value;
        this.props.onChange(fieldName, fieldValue);
    }

    onDateChange(dateValue) {
        // for a date field, the value is passed into the change handler
        this.props.onChange('dateCommenced', dateValue);
    }

    render () {
        return <form>
          <input type="text" name="jobNumber" onChange={this.onFieldChange.bind(this)} /> 
          <DatePicker onChange={this.onDateChange.bind(this)}  />
        </form>
    }
}

onChange event for React child component to update state

2 Answers