ReactJS Warning Component Change Uncontrolled Hidden Field to Controlled

react input component
controlled vs uncontrolled components reactjs
a component is changing a controlled input of type text to be uncontrolled
controlled component react
react controlled input default value
react optionally controlled component
react controlled input loses focus
react uncontrolled input set value

I have a hidden field that contains a csrf token that has its value set after a node-fetch successfully returns a JSON object and I'm not sure why I would receive the following warning based on my current setup. To my knowledge this warning should be thrown if using either the controlled or uncontrolled methods to update and set an input field, but I feel like simply setting a prop as a value does not fit the criteria I read in the documentation.

Warning: A component is changing an uncontrolled input of type hidden 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.

Located at:

in input (created by ActivityFeedSearchForm)
    in form (created by ActivityFeedSearchForm)
    in div (created by ActivityFeedSearchForm)
    in div (created by ActivityFeedSearchForm)
    in div (created by ActivityFeedSearchForm)
    in ActivityFeedSearchForm (created by ActivityFeed)
    in div (created by ActivityFeed)
    in ActivityFeed

Now here is my code from Parent to child, where the warning is thrown:

ActivityFeed:

export default class ActivityFeed extends React.Component{

    export default class ActivityFeed extends React.Component{
    constructor(props, context) {
        super(props, context);
        this.state = this.context.data || window.__INITIAL_STATE__ || { test: [] };
    }

    fetchList() {
        fetch(`${API_ROOT}` + '/api' + window.location.search, { compress: false })
            .then(res => {
                return res.json();
            })  
            .then(data => {
                this.setState({ 
                    ...
                    csrf: data.csrfToken, 
                    ...
                });
            });
    }

    componentDidMount() {
        this.fetchList();
    }

    render() {  
            return (
                <div>
                    <Navigation notifications={this.state.notifications}/>
                    <ActivityFeedSearchForm csrf={this.state.csrf} ... />
                </div>
            )
        }
    }
}

ActivityFeedSearchForm:

//Activity Feed - Search Form
export default class ActivityFeedSearchForm extends React.Component {
        render() {
        var clearFilters;
        if(this.typeQuery || this.props.categoryQuery || this.props.departmentQuery || this.props.teamQuery || this.props.startDateQuery || this.props.endDateQuery || this.props.typeQuery){
            clearFilters = <a href="/app" id="clear-filter">Clear</a>;
        }

        return (
            <div className="row">
                <div className="feed-search-form col-md-10 col-md-offset-1">
                    <div clas="row">
                        <form action="/app" method="post" className="feed-filter-fields">
                            <input type="hidden" name="_csrf" value={this.props.csrf}/>
                            ...
                            <div className="col-md-1 feed-filter-section filter-button-container">
                                <button type="submit" id="feed-filter-submit">Filter</button>
                                {clearFilters}
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        )
    }
}

As you already found the issue is where you define <input type="hidden" name="_csrf" value={this.props.csrf}/>.

Your csrf is probably undefined first (and the input is uncontrolled) then you change it to a controlled ones by setting a value.

If you want to keep it uncontrolled, just put a default props value using defaultProps:

ActivityFeedSearchForm.defaultProps = {
  csrf: null,
}

React warning: "is changing an uncontrolled input of type hidden to , Decide between using a controlled or uncontrolled input element for the lifetime of the component. Component { componentWillMount() { this.setState({ // value: '', // <---- this doesn't show the warning!! value: undefined, // <---- Undefined setState({ value: event.target.value, }); } render() { return ( <div> <input type="text"​  In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself. To write an uncontrolled component, instead of writing an event handler for every state update, you can use a ref to get form values from the DOM.

I agree with the previous answer, i refer you to the official documentation :https://reactjs.org/docs/uncontrolled-components.html You need to check if there is async event who init the value of your input value. If one time on the lifecyle the value is undefined, you have the error message A component is changing an uncontrolled input etc...

Uncontrolled Components – React, , instead of writing an event handler for every state update, you can use a ref to get form values from the DOM. Warning: MyForm 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 believe my input is controlled since it has a value.

First, decide if you want this form element to be controlled (value set programmatically from React state and/or JS logic) or uncontrolled (value set by the user input).

If you want a controlled input

Very likely, since it's a hidden input! It looks like you want this input to be controlled, but, when React sees undefined passed to its value prop, that makes React think you want it to be uncontrolled.

To fix that, pass an empty string '' or 0 when you want to tell React that this input's value is a falsy one, not undefined (which will cause this warning) or null (which will cause another warning). Ideally you would change your application logic to ensure that either '' or 0 is always set in the null condition.

Or... the quick an dirty solution is something like this:

<input value={yourValue || ''} />

If you want an uncontrolled input

(Very unlikely for a hidden input...)

Don't set a value prop, instead, set a defaultValue prop.

If you want a pseudo-controlled input where what is displayed in the input changes when some value variable changes, but also, users can edit it too, you could try something like this, where the element's key changes when the passed-in value, making React treat it like a new replacement element:

<input defaultValue={yourValue} key={`some-key-${yourValue}`} />

...but this will also cause the input to lose focus any time the defaultValue changes.

What are React controlled components and uncontrolled , In a controlled component, form data is handled by a React component. handleSubmit(event) { alert('A name was submitted: ' + this.input.current.value); event. React Controlled Vs. Uncontrolled Component Controlled Component. A controlled component is bound to a value, and its changes will be handled in code by using event-based callbacks. Here, the input form element is handled by the react itself rather than the DOM.

Forms – React, With uncontrolled input values, there is no updating or changing of any states. writing an error code that alerts the user that the input from the user is React uncontrolled components and React controlled components  A controlled component is one where form data is stored in the component’s state and updated by an “onChangeHandler”. A single handler can handle all of the form’s input fields, regardless

Controlled and Uncontrolled Input Values in React, flowUuid} hidden/> <div className="form-group has-feedback"> Decide between using a controlled or uncontrolled input element and remove one of these props. React throwing an uncontrolled input warning #739. The onChange handles the change in the input field and immediately updates the state of the component to the input of the user. This is what makes it a controlled value. When to use uncontrolled

Warning: Control is changing an uncontrolled input of type text to be , Warning: Input is changing an uncontrolled input of type text to be controlled #​570 Decide between using a controlled or uncontrolled input element for the value is not initialized react treats it as uncontrolled component. Controlled and uncontrolled form inputs in React don't have to be complicated. 07 Nov 2016. You may have seen many articles saying “you shouldn’t use setState,” and the docs are claiming “refs are bad”… That is so contradictory. It’s hard to understand how to “get it right” and even what are the criteria for choosing.

Comments
  • Thanks for the explanation. I added your code outside of export default class ActivityFeedSearchForm extends React.Component, but I still see the error. Is there another adjustment I should make?
  • I discovered that the better method is <input type="hidden" name="_csrf" value={this.props.csrf ? this.props.csrf : ""}/> This removed the warning