React TypeError: Cannot read properties of undefined (reading 'name')

Question

I am using React with Material UI's Textfield components. Was trying to find out the best way to set the form states with the least redundancy. Like for example, I have 8 different input fields. Instead of having a seperate handler for each input, like for example handleFirstName, handleLastName, handleEmail, handleInfo, etc.

So to accomplish this, I tried to create a handleChange handler which looks like below:

   handleChange = (e) => {
     this.setState({
       [e.target.name]: e.target.value
     });
   }

And on each component,

               <TextField
                className={classes.formInput}
                name="firstName"
                onChange={e => this.handleChange(e.target.value)}
                required
                id=""
                type="text"
                InputLabelProps={{
                  shrink: true,
                }}
                error={!firstName}
                helperText="Name is required"
                label="First Name"
                variant="standard" />
              <TextField
                className={classes.formInput}
                name="lastName"
                onChange={e => this.handleChange(e.target.value)}
                required
                id=""
                type="text"
                InputLabelProps={{
                  shrink: true,
                }}
                label="Last Name"
                variant="standard" />

And here is my state object

 constructor(props) {
    super(props);
    this.state = {
      firstName: '',
      lastName: '',
      ...,
    
    };
  }

These are just two of the input fields, but there are about 6 more fields that look the same. Any idea to combat this undefined name?

Hanly Nadackal · Accepted Answer · 2021-11-01 18:57:22Z

3

The problem is that you are not passing the complete event object. You are passing only the value. That is the reason why you are getting the name as undefined.

Try changing the onChange event to below -

onChange={this.handleChange}

This way you will get the complete event object in the function's e variable.

answered Nov 1, 2021 at 18:57

Hanly Nadackal

1244 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kena Wakwoya · Accepted Answer · 2021-11-01 19:04:32Z

1

I think you need to handle multiple input field changes in single function.It is doable. try this

handleChange = (e)=>{
    {name,value} = e.target;
    this.setState({
        [name]=value;
    });
}

finally when to pass the onChange method to fields use :

onChange = {this.handleChange}

answered Nov 1, 2021 at 19:04

Kena Wakwoya

513 bronze badges

Collectives™ on Stack Overflow

React TypeError: Cannot read properties of undefined (reading 'name')

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related