[Solved] Warning: A component is changing an uncontrolled input of type text to be controlled

Today I am trying to use the Input field in my react app But I am facing the following strange error: Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component in ReactJS. In this Exerror article, We are going to learn about How to reproduce this error and we will discuss All Possible Solutions Lets Get Start with This Article.

How Warning: A component is changing an uncontrolled input of type text to be controlled Error Occurs?

I am trying to use the Input field in my react app But I am facing the following strange error:

Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component

So here I am writing all the possible solutions that I have tried to resolve this error.

How To Solve Warning: A component is changing an uncontrolled input of type text to be controlled Error?

Solution 1: Set InitialValue for Input Value

To Solve Warning: A component is changing an uncontrolled input of type text to be controlled Error You need to set the initial value to the value field of the Input tag. Here is my code I have one input field and onchange I am changing its value to my variable username and that username using in Input fields value. But when this screen renders for the first time my value is undefined that’s why this Error Occurs. I am using ternary operator to assign initialvalue.

import {useState} from 'react';

const App = () => {
  const [username, setUsername] = useState();

  const handleChange = event => {
    Username(event.target.value);
  };

  return (
    <div>
      <input
        type="text"
        id="username"
        name="username"
        onChange={handleChange}
        value={username || ""} // Given Default Value to ""
      />
    </div>
  );
};

export default App;

I have set value={username || “”} Here when username is empty or undefined then it will take “” this value. and Now my error is solved successfully. Thank you.

Solution 2: Give Default value to useState

You can also Pass the default value to the useState. If you are using useState then you can pass default value in useState(); And this value is used by the Our Input tag. Just like this.

import {useState} from 'react';

const App = () => {
  const [username, setUsername] = useState(""); // Passing Default Value by adding "" in useState

  const handleChange = event => {
    Username(event.target.value);
  };

  return (
    <div>
      <input
        type="text"
        id="username"
        name="username"
        onChange={handleChange}
        value={username} 
      />
    </div>
  );
};

export default App;

and now your error resolved successfully.

Conclusion

It’s all About this error. I hope We Have solved Your error. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?

Also, Read

• Unexpected reserved word ‘await’
• How to use a switch Case statement inside a React component?
• type is invalid — expected a string (for built-in components) or a class/function
• Component definition is missing displayName (react/display-name)
• Maximum update depth exceeded. This can happen when a component repeatedly calls