how do i add a validation message in my react component - reactjs

Question

I have this app that adds products and updates it.As it is, the product form can be submitted without a name, and it creates a new product with a blank line in the name column.how do i Add a validation message so that it requires a 'name' field before submitting the results, and shows a message if you try to submit the form without a name value.
import React from 'react';
const RESET_VALUES = {id: '', category: '', price: '', stocked: false, name: ''};
class ProductForm extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.handleSave = this.handleSave.bind(this);
this.state = {
product: Object.assign({}, RESET_VALUES),
errors: {}
};
}
handleChange(e) {
const target = e.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState((prevState) => {
prevState.product[name] = value;
return { product: prevState.product };
});
}
handleSave(e) {
this.props.onSave(this.state.product);
this.setState({
product: Object.assign({}, RESET_VALUES),
errors: {}
});
e.preventDefault();
}
render() {
return (
<form>
<h3>Enter a new product</h3>
<p>
<label>
Name
<br />
<input type="text" name="name" onChange={this.handleChange} value={this.state.product.name}/>
</label>
</p>
<p>
<label>
Category
<br />
<input type="text" name="category" onChange={this.handleChange} value={this.state.product.category} />
</label>
</p>
<p>
<label>
Price
<br />
<input type="text" name="price" onChange={this.handleChange} value={this.state.product.price} />
</label>
</p>
<p>
<label>
<input type="checkbox" name="stocked" onChange={this.handleChange} checked={this.state.product.stocked}/>
In stock?
</label>
</p>
<input type="submit" value="Save" onClick={this.handleSave}/>
</form>
);
}
}
export default ProductForm;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

Set errors to null by default.
this.state = {
product: Object.assign({}, RESET_VALUES),
errors: null
};
Update your handleSave to something like this:
handleSave(e) {
e.preventDefault();
if (this.state.product.name.trim() === '') {
this.setState({errors: {name: 'Please fill name'}});
return;
}
this.props.onSave(this.state.product);
this.setState({
product: Object.assign({}, RESET_VALUES),
errors: null
});
}
And then in Form render method under Input field show error.
<label>
Name
<br />
<input type="text" name="name" onChange={this.handleChange} value={this.state.product.name}/>
{this.state.errors && <p>{this.state.errors.name}</p>}
</label>
Working example https://codesandbox.io/s/cocky-ride-2p8ym