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>
);
}
}