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:

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: {
      name: value,

2. Use default values in input fields

    value={ || ""}
    placeholder="Write your name here"