Question

0

Warning: A component is changing a controlled input to be uncontrolled in React js

rated 0 times [ 7] [ 7] / answers: 1 / hits: 7247 / 3 Years ago, fri, may 7, 2021, 12:00:00

HELP. i use react hook, i got the error when i type the input.

error:

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.

Code:

const AddUser = () => {

const initialUserState = {

    id: null,

    name: '',

    age: 0

}



const [users, setUsers] = useState(initialUserState)



const handleChange = (e) => {

    setUsers({ [e.target.name]: e.target.value })



    e.preventDefault()

}    



return (

    <div>

        <input name="name" type="text" value={users.name} onChange={handleChange}/>

        <input name="age" type="number" value={users.age} onChange={handleChange}/>

    </div>

)}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

havenbilliec

Add To Favorites

Follow

Total Points: 324

Total Questions: 106

Total Answers: 94

Location: Pitcairn Islands

Member since Fri, Oct 15, 2021

3 Years ago

havenbilliec questions

1 Uncaught ReferenceError: process is not defined / Line 0: Parsing error

Thu, Mar 3, 22, 00:00, 2 Years ago

1 React Big Calendar - Is it possible to click on a day and retrieve a list of events on that day?

Fri, Feb 11, 22, 00:00, 2 Years ago

1 Error: Cannot find module nuxt.js, why my app don't start?

Wed, Apr 7, 21, 00:00, 3 Years ago

1 Redirecting to another html page after successful login attempt

Wed, Nov 25, 20, 00:00, 4 Years ago

1 How to use d3.js drag properly?

Thu, Oct 29, 20, 00:00, 4 Years ago

View All

answered 3 Years ago marvinm · Accepted Answer

Unlike setting the state in a class component, useState doesn't merge the object you pass, and you have to do it manually when setting the state. When you set age, for example, you replace the entire state object, which makes name to be undefined, and vice versa.

Use functional update, and create a new state based on the previous state object before setting it.

const { useState } = React



const AddUser = () => {

  const initialUserState = {

      id: null,

      name: '',

      age: 0

  }



  const [users, setUsers] = useState(initialUserState)



  const handleChange = (e) => {

      // create the new state and set it

      setUsers(prev => ({ ...prev, [e.target.name]: e.target.value }))



      e.preventDefault()

  }    



  return (

      <div>

          <input name=name type=text value={users.name} onChange={handleChange}/>

          <input name=age type=number value={users.age} onChange={handleChange}/>

      </div>

  )

}



ReactDOM.render(

  <AddUser />,

  root

)

<script crossorigin src=https://unpkg.com/react@17/umd/react.development.js></script>

<script crossorigin src=https://unpkg.com/react-dom@17/umd/react-dom.development.js></script>



<div id=root></div>