Easily sync your inputs to your state with this event handler.

react-input-state-sync.js

import merge from 'lodash/merge';

export default function rjsBind(event) {
    const path = event.target.getAttribute('data-path'),
        paths = path.split('-'),
        value = event.target.value;
    let object = {};
    paths.reduce(([object, value], path, idx) => {
        object[path] = idx === paths.length - 1 ? value : {};
        return [object[path], value];
    }, [object, value]);
    object = merge(this.state, object);
    this.setState(() => object);
}

class MyComponent extends Component {
  
  constructor() {
    super();
    this.state.foo.num = 0;
  }

  render() {
    // input must have a 'data-path' that points to endpoint on state
    return (
      <input 
        type="number" 
        data-path="foo-num" 
        value={this.state.foo.num} 
        onChange={event => this.rjsBind.bind(this, event)()} 
      />
    )
  }
}