You should use setState to update the state instead of simply modifying the existing state:

// Bad
validate = (event) => {
  const value = event.target.value;
  const valid = validator[this.props.type](value);
  this.state.value = value;
  this.state.valid = valid;
}
// Good
validate = (event) => {
  const value = event.target.value;
  const valid = validator[this.props.type](value);
  this.setState({ value, valid })
}

The end result is the same: this.state is changed to its new value. However, if we directly update the this.state object, then React must poll the value of this.state regularly to be notified of any changes. This is slow and inefficient, and not how React is implemented. Instead, by changing the state via the this.setState method, it will 'reactively' informs React that the state has changed, and React may opt to trigger a re-render of the view.