0

So I'm running a pretty standard input form in one of my components called Start which feeds to App where it asks for the player's name. This uses React hooks to initialize a state, then changes the state onChange.

import React, {useState} from 'react'

export default function Start() {
    const [playerName, setName] = useState("Player")
    function handleName (event){
        setName(event.value)
    }

    return (
        <div>
            <h3>Player Name:</h3>
            <input type ="text" value={playerName} onChange={handleName}/>
        </div>
    )
}

For some strange reason, whenever I type into the player name field, React thinks I am setting it to undefined, and gives me this 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.

I further verified this through checking React Dev Tools. For some reason it thinks the new value is undefined every time I type anything in the box, but it still displays the correct lettering which is set to {playerName}!. This is within a Route/Switch as well if that makes any difference.

Any ideas what the issue/fix is?

karel
  • 5,489
  • 46
  • 45
  • 50
aa98
  • 1

1 Answers1

0

This means you are setting the input value to undefined because the value key is available on event.target and is undefined on event. hence the error

This is likely caused by the value changing from a defined to undefined, which should not happen.

Fatah
  • 2,184
  • 4
  • 18
  • 39