Question

0

42

Views

reactjs input return undefined

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

5 months ago · Juan Pablo Isaza

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-09T01:32:17.740Z

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

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

Answer 2 · 2022-07-09T01:32:17.747Z

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