Why is this component switching from controlled to uncontrolled? - React

Question

Here is my stateless react component:

export default ({acresMin, update}) => (
    <div>
        <input
            onChange={(e) => update({'acresMin': e.target.value})}
            placeholder="10"
            type="text"
            value={acresMin}/>
    </div>
)

When I change the value in the input , I get this warning :

Warning: StatelessComponent is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

I am updating with an onChange and saving the value in the store which is being populated through the props .

What do I not understand about this?

Answer 1

Uncontrolled input does not refer to your component directly, but to the input field that is defined in your component.

React differentiates between controlled and uncontrolled components :

An <input> without a value property is an uncontrolled component

Is your acresMin property undefined when you first render the component? This would cause the input to be renderd as an uncontrolled one at first, but as a controlled one later once the property is set.