1

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> ); } }); 
4
  • Have you done what the error suggests? Commented Mar 10, 2017 at 9:58
  • Yes. I still get the same warning. Commented Mar 10, 2017 at 10:04
  • can you create fiddle please? Commented Mar 10, 2017 at 10:20
  • if you are using the exact above code, it should not through the warning because you are using checked with onchange event Commented Mar 10, 2017 at 10:59

1 Answer 1

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/

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

3 Comments

I tried this as well, I still get the same warning.
can you try this defaultChecked={ this.props.checked }
Still doesn't work and throws up the same warning, Danish. :(

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.