This is a demonstration of a React component using nested objects as state.

 class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      childState: {
	state1: 'dummy value 1',
        state2: 'dummy value 2'
      }
     }
    this.update = this.update.bind(this);
  }

  update() {
     this.setState({ childState: { ...this.state.childState, state1: 'new value'} });
  }

  render() {
    return <fieldset>
      <legend>parent</legend>
      <Child state1={this.state.childState.state1}  
             state2={this.state.childState.state2} />
      <button onClick={this.update}>Update state1</button>
    </fieldset>;
  }
}

class Child extends React.Component {
  render() {
    return <fieldset>
      <legend>child</legend>
      <p>state1 = {this.props.state1}</p>
      <p>state2 = {this.props.state2}</p>
    </fieldset>;
  }
}

ReactDOM.render(<Parent />, box1);

React Cheatsheet