setState "TypeError: Cannot read property 'value' of undefined " when using different inputs with one onChange handler

Question

The following code

import React, { Component } from 'react';

class AddNinja extends Component {
  state = {
    name: null,
    age: null,
    belt: null
  }
  handleChange = (e) => {
    this.setState({[e.target.id]: e.taget.value});
  }
  handleSubmit = (e) => {
    e.preventDefault();  
    console.log(this.state);
  }
  render() {
    return (
      <div>        
        <form onSubmit={this.handleSubmit}> 
          <label htmlFor='name'>Name: </label>
          <input type='text' id='name' onChange={this.handleChange} />
          <label htmlFor='age'>Age: </label>
          <input type='text' id='age' onChange={this.handleChange} />
          <label htmlFor='belt'>Belt: </label>
          <input type='text' id='belt' onChange={this.handleChange} />
          <button>Submit</button>
        </form>
      </div>
    )
  }
}

export default AddNinja;

Will triger the error below;

TypeError: Cannot read property 'value' of undefined
AddNinja._this.handleChange
src/AddNinja.jsx:10
   7 |   belt: null
   8 | }
   9 | handleChange = (e) => {
> 10 |   this.setState({[e.target.id]: e.taget.value});
  11 | }
  12 | handleSubmit = (e) => {
  13 |   e.preventDefault();

When I explicitly use any of the three defined key it will work i.e:

this.setState({name: e.taget.value});

Antbody knows what going on? According to the following link it should work

`e.target` not `e.taget`... – Andrew Li Dec 14 '18 at 13:28 — Andrew Li, Dec 14 '18 at 13:28

score 1 · Accepted Answer · answered Dec 14 '18 at 13:33

1

You've misspelled target and used taget instead. Try this:

this.setState({[e.target.id]: e.target.value});

answered Dec 14 '18 at 13:33

Smarticles101

1,822
1
14
28

1

If it's a typo, please don't answer. Instead use the flag button to flag it as a typo. – Andrew Li Dec 14 '18 at 13:35
@Li357 I was unaware that's how I should handle these types of questions. Thanks for letting me know! :D – Smarticles101 Dec 14 '18 at 13:43
1

Thanks I spent 3 hours on this without ever see the typo – Fabou78 Dec 14 '18 at 13:50
@Fabou78 no problem, happens to the best of us. Glad I could help! – Smarticles101 Dec 14 '18 at 13:51

setState "TypeError: Cannot read property 'value' of undefined " when using different inputs with one onChange handler

1 Answers1