Email Input Warning - A component is changing a controlled input of type text to be uncontrolled

Question

In my React app, I'm getting this error during onChange event with my email input field:

Warning: A component is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa).

Here's the onChange block that's causing this warning; The error goes away if I remove the first if block but of course I need it there for email validation.

validateEmail(email) {
    const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}

handleOnChange = e => {
const { name, value } = e.target;
const emailInput = e.target.value;
const emailValid = this.validateEmail(emailInput);

if (name === 'email') {
  this.setState({
    inputs: {
      email: emailInput,
    },
    errors: {
      email: !emailValid,
    },
  });
} else {
  this.setState({
    inputs: {
      ...this.state.inputs,
      [name]: value,
    },
    errors: {
      ...this.state.errors,
      [name]: false,
    },
  });
}
};

State:

constructor() {
super();
this.state = {
  inputs: {
    name: '',
    email: '',
    message: '',
  },
  phone: '',
  show: true,
  errors: {
    name: false,
    email: false,
    message: false,
  },
};
}

How do I keep my current code and address the warning?

Answer 1

You need to spread the existing/previous state in the if-block. You likely have other input tags that were initially connected to the input-state object which looks like:

inputs: {
   name: "",
   email: "",
   message: ""
}

<input value={this.state.input.name} name="name"/>
<input value={this.state.input.email} name="email"/>
<input value={this.state.input.message} name="message"/>

but when you used this.setState() in your posted code, the connection is lost. You are setting the inputs state to an object with a single property of email :

inputs: {
   email: "valueFromEventTarget"
}

What you need to do is spread the existing state so you don't lose the other key/value pairs in the input object: Update your handleChange() function to this:

handleOnChange = e => {
const { name, value } = e.target;
const emailInput = e.target.value;
const emailValid = this.validateEmail(emailInput);

if (name === 'email') {
  this.setState({
    inputs: {
      ...this.state.inputs,
      email: emailInput,
    },
    errors: {
      ...this.state.errors,
      email: !emailValid,
    },
  });
} else {
  this.setState({
    inputs: {
      ...this.state.inputs,
      [name]: value,
    },
    errors: {
      ...this.state.errors,
      [name]: false,
    },
  });
}
};