JavaScript – Reaction Type Error: Cannot read unspecified features (read ‘name’)

I am using Reaction with the text field components of the material UI. Trying to figure out the best way to set up farm status with minimal redundancy. For example, I have 8 different input fields. Instead of having a separate handler for each input, such as handle first name, handle list name, handle email, handle info, etc.

So to accomplish this, I tried to make a handle change handler that looked like the one 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 objection.

 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 alike. Any ideas on how to deal with this indefinite name?

Leave a Reply

Your email address will not be published.