I'm trying to write a functional ponent that includes an <input>, but I'm getting the "A ponent is changing an uncontrolled input of type text to be controlled." error and can't figure out what I'm doing wrong.

I've reduced my code to this, which reproduces the problem:

function Input({ value, onChange }) {
    const [text, setText] = useState(value);

    function update(event) {
        setText(event.target.value);
        if (typeof onChange === "function") {
            onChange(event.target.value);
        }
    }

    return (
        <input type="text" value={text} onChange={update} />
    );
}

I'm not quite sure how to use useState here to make this a controlled element—because this is clearly not working :(

What am I doing wrong?

I'm trying to write a functional ponent that includes an <input>, but I'm getting the "A ponent is changing an uncontrolled input of type text to be controlled." error and can't figure out what I'm doing wrong.

I've reduced my code to this, which reproduces the problem:

function Input({ value, onChange }) {
    const [text, setText] = useState(value);

    function update(event) {
        setText(event.target.value);
        if (typeof onChange === "function") {
            onChange(event.target.value);
        }
    }

    return (
        <input type="text" value={text} onChange={update} />
    );
}

I'm not quite sure how to use useState here to make this a controlled element—because this is clearly not working :(

What am I doing wrong?

• javascript
• reactjs
• react-hooks

1 Answer 1

You are most likely not passing in a value prop to your Input ponent, which will cause text to be undefined initially, and when you set the text in update, it bees controlled.

You can change your code to pass in a value prop to Input every time you use it, or give value a default value of an empty string.

function Input({ value = "", onChange }) {
    const [text, setText] = useState(value);

    function update(event) {
        setText(event.target.value);
        if (typeof onChange === "function") {
            onChange(event.target.value);
        }
    }

    return (
        <input type="text" value={text} onChange={update} />
    );
}