React problem with validation and clearing inputs

JavaScript
1

Hello,

How can I validate inputs to not be empty? I also want to clear these field everytime I add ListItem.
Link to codepen and link to GitHub project folder

Below is the code from Add component which after click updates the Budget state.

class Add extends Component {
    constructor(props) {
        super(props);
        this.state = {
            amount: '0',
            description: "",
            date: new Date().toLocaleDateString() + " at " + new Date().toLocaleTimeString() ,
            category: "none"
        };
        this.handleChange = this.handleChange.bind(this);
        this.resetForm = this.resetForm.bind(this);
    }
    handleChange(event) {
        this.setState({[event.target.name]: event.target.value});
      console.log(event.target.name)
        }  
    
    render() {

        return (
            <form >
                <button className={styles.btn} onClick={this.resetForm}>Reset form</button> 
                <p className={styles.inputInfo}>Please, enter an amount:</p>
                <input className={styles.input} 
                        value={this.state.amount} 
                        name="amount"
                        onChange={this.handleChange}
                        type="number" 
                        placeholder="Enter your amount" />
                <input className={styles.input}
                        name="description"
                        onChange={this.handleChange}
                        placeholder="the description"
                    />               
               <select className={styles.input} name="category" onChange={this.handleChange}>
                    <option value="">and select your option</option>
                    <option value="Food">Food</option>
                    <option value="Bills">Bills</option>
                    <option value="Entertainment">Entertainment</option>
                    <option value="Income">Income</option>
                </select>            
                <button className={styles.btn} onClick={(event)=> this.props.handler(event,this.state.amount, this.state.description, this.state.date, this.state.category)}> Add value </button>   
            </form>
        );
   }  
}
2

When you write your handler to submit the form data, you’ll check your state to make sure it’s got data. If not, set a flag in your state to indicate that there’s an error and then display it somehow. In that same handler, when you successfully add the item, you’ll reset the component’s state to what it was when the component mounted. It would help to pull that starting state object out of the constructor so you can use it later.

const defaultState = {
            amount: '0',
            description: "",
            date: new Date().toLocaleDateString() + " at " + new Date().toLocaleTimeString() ,
            category: "none"
        };

function resetState() {
    this.setState(defaultState);
}