Form example
```js
initialState = {
gender: 'male',
name: '',
surname: '',
description: '',
nameError: null,
surnameError: null
};
onRadioClick = (e) => {
setState({
[e.target.name]: e.target.value
})
}
validate = (fields) => {
return fields.reduce((acc, field) => {
const { name, value } = field;
if (!value || value.lenght === 0) {
acc[name] = 'This field is required';
} else if (!/^[a-z]+$/i.test(value)) {
acc[name] = 'Field should contain only letters';
}
return acc;
}, {})
}
onInputChange = (e) => {
const { name, value } = e.target;
const { [name]: error } = validate([{name, value}]);
if (error) {
setState({
[name]: value,
[`${name}Error`]: error
});
} else {
setState({
[name]: value,
[`${name}Error`]: null
});
}
}
onDescriptionChange = (e) => setState({ description: e.target.value })
onSubmit = (e) => {
e.preventDefault();
const errors = validate([
{name: 'name', value: state.name},
{name: 'surname', value: state.surname}
]);
if (Object.keys(errors).length !== 0) {
const newState = Object.keys(errors).reduce((acc, field) => {
acc[`${field}Error`] = errors[field];
return acc;
}, {})
setState(newState);
} else {
alert(`
name: ${state.name}
surname: ${state.surname}
gender: ${state.gender}
`)
}
}
```
```js noeditor
```