Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
class SimpleForm extends React.Component {
state = {
...
lastName: "",
lastNameError: ""
};
validateName = ...;
onFirstNameBlur = ...;
onFirstNameChange = ...;
onLastNameBlur = () => {
const { lastName } = this.state;
const lastNameError = this.validateName(lastName);
return this.setState({ lastNameError });
};
onLastNameChange = event =>
this.setState({
lastName: event.target.value
});
render() {
const { firstNameError, firstName, lastName, lastNameError } = this.state;
return (
<div style={style.form}>
<div style={style.inputGroup}>
<label>
First name:
<input
style={style.input}
type="text"
name="firstName"
onChange={this.onFirstNameChange}
onBlur={this.onFirstNameBlur}
/>
{firstNameError && <div style={style.error}>{firstNameError}</div>}
</label>
</div>
<div style={style.inputGroup}>
<label>
Last name:
<input
style={style.input}
type="text"
name="lastName"
onChange={this.onLastNameChange}
onBlur={this.onLastNameBlur}
/>
{lastNameError && <div style={style.error}>{lastNameError}</div>}
</label>
</div>
<Greetings firstName={firstName} lastName={lastName} />
</div>
);
}
}
export default SimpleForm;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment