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' >&#10003;</button> 
</form>
...
 )
}

CodePudding user response：

you just should set event.target.value in onChange function like this:

onChange(e) {
    this.setState({quantity: e.target.value})
  }

CodePudding user response：

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' >&#10003;</button> 
</form>
...
 )
}```