Inside a class method, this refers to the React element (which is an instance of this Input React component type). Therefore, we can define a method called validate that will validate the user input and update the state:
<script type="text/babel"> const validator = { email: (email) => /\S+@\S+\.\S+/.test(email), password: (password) => password.length > 11 && password.length < 48 } class Input extends React.Component { constructor() { ... } validate = (event) => { const value = event.target.value; const valid = validator[this.props.type](value); this.setState({ value, valid }); } render() { return <label>{this.props.label}<input type={this.props.type} onChange={this.validate} /></label> } } ...</script>
The validate method ...
