Input returning undefined, I also added onChange function to the input, this.state.quantity returns undefined in the console
OrderMed.js:
export default class OrderMed extends Component {
constructor(props){
super(props);
this.state = {
Meds: [],
quantity: '',
id:''
}
this.onChange = this.onChange.bind(this);
}
onChange(e) {
this.setState({quantity: e.target.quantity})
}
render() {
return (
...
<form >
<input min={1} placeholder='quantity' type='number' value={this.state.quantity} onChange={this.onChange} id="quantity"></input>
<button onClick={() => console.log(this.state.quantity)} id='btn-color1' class="btn btn-color ml-2 px-3 mb-2 w-1">✓</button>
</form>
...
)
}
you just should set event.target.value in onChange function like this:
onChange(e) {
this.setState({quantity: e.target.value})
}
you should go for arrow functions rather than the old fashion ones it reduces complexities and you missed the value of the target element
export default class OrderMed extends Component {
constructor(props){
super(props);
this.state = {
Meds: [],
quantity: '',
id:''
}
}
onChange = (e) => {
const quantity = e.target.value;
this.setState({quantity})
}
render() {
return (
...
<form >
<input min={1} placeholder='quantity' type='number' value={this.state.quantity} onChange={this.onChange} id="quantity"></input>
<button onClick={() => console.log(this.state.quantity)} id='btn-color1' class="btn btn-color ml-2 px-3 mb-2 w-1">✓</button>
</form>
...
)
}