React JS warning

Question

I am getting this warning when I run the below code.How can I remove the error?

Thank you.

Warning: Failed form propType: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly. Check the render method of test.

var test = React.createClass({

getInitialState : function(){
    return {
        number : 10,
        checked: [],
        selected : []
    };
},

componentWillMount : function(){

},

moreAilment : function (){
    var temp = this.state.number + 5;
    this.setState({number:temp});
},

handleChangechk: function (e){
    const target = e.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;
    var checkedCopy = this.state.checked.slice();
    var selectedCopy = this.state.selected.slice();

    if(value===true) {
            checkedCopy[name] = true;
            selectedCopy [name] = name; }
    else {  
            checkedCopy[name] = false;
            selectedCopy [name] = '';  }

    this.setState({
               checked: checkedCopy,
              selected: selectedCopy });
},


render : function() {

    var ailmentsList = [];
    var selectedList= [];

    for (var i = 0; i < this.state.number; i++) {

        ailmentsList.push(<span ><input type="checkbox" checked={!!this.state.checked[i]}  onChange={(e)=> {this.handleChangechk(e)}} /><span ></span><label> Asthma {i}</label></span>);
        if(this.state.selected[i])
            {
                selectedList.push(this.state.selected[i]); 
            }
    };

    return(
            <div className>
                {selectedList}
            </div>
        );

   }
});

if you are using the exact above code, it should not through the warning because you are using checked with onchange event — Mayank Shukla
– Mayank Shukla, Commented Mar 10, 2017 at 10:59

Danish · Accepted Answer · 2017-03-10 11:09:03Z

2

Could you try this

<div>
    <input type='checkbox' defaultChecked />
</div>

Basically, you need to add defaultChecked attribute to your checkbox OR I'm not sure if it will work but lets try can you do onchange this way

onChange={this.handleChangechk}

instead of onChange={(e)=> {this.handleChangechk(e)}}

EDIT: Created Simple example of working Fiddle with Checkbox and Button Toggling state of checkbox http://jsfiddle.net/yeoman/payugwju/1/

edited Mar 10, 2017 at 11:09

answered Mar 10, 2017 at 10:04

Danish

1,49719 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jayant Pande Over a year ago

I tried this as well, I still get the same warning.

Danish Over a year ago

can you try this defaultChecked={ this.props.checked }

Jayant Pande Over a year ago

Still doesn't work and throws up the same warning, Danish. :(

Collectives™ on Stack Overflow

React JS warning

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related