A component is changing an uncontrolled input of type text to be controlled error in ReactJS

by

The reason is, in state you defined:

this.state = { fields: {} }

fields as a blank object, so during the first rendering this.state.fields.name will be undefined, and the input field will get its value as:

value={undefined}

Because of that, the input field will become uncontrolled.

Once you enter any value in input, fields in state gets changed to:

this.state = { fields: {name: 'xyz'} }

And at that time the input field gets converted into a controlled component; that’s why you are getting the error:

A component is changing an uncontrolled input of type text to be
controlled.

Possible Solutions:

1- Define the fields in state as:

this.state = { fields: {name: ''} }

2- Or define the value property by using Short-circuit evaluation like this:

value={this.state.fields.name || ''}   // (undefined || '') = ''

More Related Contents:

  1. “SyntaxError: Unexpected token < in JSON at position 0"
  2. ReactJS – Does render get called any time “setState” is called?
  3. Fetch request to local file not working
  4. Invalid hook call. Hooks can only be called inside of the body of a function component
  5. ReactJS – Lifting state up vs keeping a local state
  6. TypeError: _firebase__WEBPACK_IMPORTED_MODULE_2__.default.collection is not a function
  7. How to call an async function inside a UseEffect() in React?
  8. How to fix error “Failed to compile : ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41)”
  9. How to pass in a react component into another react component to transclude the first component’s content?
  10. Uncaught TypeError: Cannot read property ‘push’ of undefined (React-Router-Dom)
  11. Github – unexpected disconnect while reading sideband packet
  12. How do you pass data when using the navigate function in react router v6
  13. How do I access store state in React Redux?
  14. Read Store’s Initial State in Redux Reducer
  15. How to pass state back to parent in React?
  16. onClick works but onDoubleClick is ignored on React component
  17. Is componentDidMount of parent called after all componentDidMount of children?
  18. Error “Error: A is only ever to be used as the child of element”
  19. ReactJS – Get Height of an element
  20. Retrieving value from with multiple option in React
  21. Images not loading when relative path is used in React
  22. Pros/cons of using redux-saga with ES6 generators vs redux-thunk with ES2017 async/await
  23. Can’t call setState on a component that is not yet mounted
  24. Redux Presentational Components Vs Container Component
  25. minimise the code since I am using the same code only the content in p tags changes and component AccordionHeader header changes
  26. Only numbers. Input number in React
  27. Disable chrome react DevTools for production
  28. You’re importing a component that needs useState. It only works in a Client Component, but none of its parents are marked with “use client”
  29. How can I redirect in React Router v6?
  30. React props: Should I pass the object or its properties? Does it make much difference?

Leave a Comment