component is changing controlled input to be uncontrolled – Code Example

A controlled input is run by state. If this state gets undefined then the controlled input becomes uncontrolled and you will get the warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components

Solution with Code Example

Make sure that the state doesn’t get undefined.

1. Include previous states before setting new value to state.

this.setState(prevState => ({
    contactUs: {
      ...prevState.contactUs,
      name: value,
    },
  }));

2. Use default values in input fields

<input
    type="text" 
    id={'name'}
    value={this.state.contactUs.name || ""}
    placeholder="Write your name here"
/>