/*
When DefaultErrors is not frozen, it will be mutated. Typing 'asdf' into the first
box causes the string 'the value is asdf!' to be written to DefaultErrors.foo, and
any re-render of any Input component will reflect that. You can observe this by
putting anything (not 'asdf') into the second box.

When it is frozen, and strict mode is off, you will never see the 'the value is asdf!'
message, nor will you get any errors.

When it is frozen, and strict mode is on, you will get a:
  Uncaught TypeError: Cannot assign to read only property 'foo' of object ...
*/

const DefaultErrors = {
  foo: '',
}
//Object.freeze(DefaultErrors)

class Input extends React.Component {
  state = {
    value: '',
    errors: DefaultErrors
  }

  onChange = (event) => {
    if (event.target.value === 'asdf') {
      this.setState(state => {
        const errors = _.extend(state.errors, { foo: 'the value is asdf!' })
        return { errors }
      })
    }

    this.setState({
      value: event.target.value
    })
  }

  render() {
    return (
      <p>
        <input
          onChange={this.onChange}
          value={this.state.value}
        />
        <span>message: {this.state.errors.foo}</span>
      </p>
    );
  }
}

ReactDOM.render(
  <div>
    <Input />
    <Input />
  </div>,
  document.getElementById('root')
);