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

Question

import React, { useState } from 'react'

const App = () => {

    const [fullname, updatfullNa] = useState({
        fName:'',
        lName:'',
        eMail:'',
        pHone:''
    })

    const Inputevent = (event) => {
        // const value = event.target.value
        // const name = event.target.name
        const{value, name}=event.target

        updatfullNa((preValue) => {
            if (name === 'fName') {
                return { 
                    fName: value,
                    lName: preValue.lName,
                    eMail:preValue.eMail,
                    pHone:preValue.pHone

                }
            }
            else if (name === 'lName') {
                return { 
                    fName: preValue.fName,
                    lName: value,
                    eMail:preValue.eMail,
                    pHone :preValue.pHone
                }
            } else if (name === 'eMail') {
                return { 
                    fName: preValue.fName,
                    lName: preValue.lName,
                    eMail:value

                }
            } 
            else if (name === 'pHone') {
                return { 
                    fName: preValue.fName,
                    lName: preValue.lName,
                    eMail:preValue.eMail,
                    pHone:value
                }
            } 
        })

    }

    const onSubmit = (event) => {
        event.preventDefault()
    
    }

    return (<>
        <form onSubmit={onSubmit} >
            <div className="form">
                <h1>Hello {fullname.fName} {fullname.lName} <br/>
                <span className="EP"> {fullname.eMail} <br/>{fullname.pHone} </span> </h1>
                <input type="text" placeholder="Enter Your Name"
                    name="fName"
                    onChange={Inputevent}  value={fullname.fName}/>
              
                <input type="text" placeholder="Enter Your Last Name" name="lName" onChange={Inputevent}  value={fullname.lName}/>

                <input type="email" placeholder="Enter Your Email" name="eMail" onChange={Inputevent}  value={fullname.eMail}/>

                <input type="number" placeholder="Enter Your Phone Number" name="pHone" onChange={Inputevent}  value={fullname.pHone}/>
        
                <button type="submit" >Submit me ????</button>
            </div>
        </form>

    </>
    )
}
export default App

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 input div form App@http://localhost:3000/static/js/main.chunk.js:52:89

Shyam Shyam · Accepted Answer · 2021-06-05T07:14:02

The issue is here , when the name === 'eMail' you are returning the below state which doesn't have the value for the pHone.

 return { 
                fName: preValue.fName,
                lName: preValue.lName,
                eMail:value

            }

Also consider refactoring your code as below

const Inputevent = (event) => {
  // const value = event.target.value
  // const name = event.target.name
  const{value, name}=event.target

  updatfullNa((prevState) => ({...prevState, [name]: value }))
}

The ... before the prevState says the copy all the prevState to a new Object and just update the value of the key [name]

Refer

Using Spread Operator for Objects

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

1 Answers