Reactjs change the state of an object's property based on checked input

Question

I'm learning React and am building a simple todo list. I have this object in my initialState

 getInitialState:function(){
    return {
        items: [
            {
                text:"Buy Fish",
                key: "1",
                done: 0
            }
            ]
        }
 },

My TodoList component has this map function

var listItem = this.props.items.map((item, index)=>{
        return <li key={item.key}> <input type="checkbox" onChange={(e)=>{this.props.onChange(item.key, e)}} /> <span onClick={()=>{this.props.editItem(item.text)}}>{item.text}</span> <button onClick={()=>this.props.removeItem(item.key)}>x</button> </li>
    });

Now I want to click on the checkbox and change the state of the property done to 1.

The onChange prop is leading to a function

  itemDone:function(index, e){
  var myArray = this.state.items;
  var a = e.target.checked;
  console.log(index);
},

What is the correct way to change the value from 0 to 1 to that specific item?

Ruhul Amin · Accepted Answer · 2017-05-15 14:23:00Z

1

You can pass the index to your onChange method.

var listItem = this.props.items.map((item,index)=>{
            return <li key={item.key}> <input type="checkbox" onChange={(e)=>this.props.onChange(index,e)} /> <span onClick={()=>{this.props.editItem(item.text)}}>{item.text}</span> <button onClick={()=>this.props.removeItem(item.key)}>x</button> </li>
        });

and get specific items with and index:

itemDone:function(index,e){
    var myArray = this.state.items;
    var a = e.target.checked;
    console.log('item': this.state.items[index]);
 },

answered May 15, 2017 at 14:23

Ruhul Amin

1,78515 silver badges21 bronze badges

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

Comments

Shubham Khatri · Accepted Answer · 2017-05-15 14:15:17Z

Pass the index and then edit the same object. Also make use of spread operator to create a new object instance of the item array otherwise, myArray will refer to the immutable object state item itself.

var listItem = this.props.items.map((item, index)=>{
            return <li key={item.key}> <input type="checkbox" onChange={()=>this.props.onChange(index)} /> <span onClick={()=>{this.props.editItem(item.text)}}>{item.text}</span> <button onClick={()=>this.props.removeItem(item.key)}>x</button> </li>
        });


itemDone:function(index){
    var myArray = [...this.state.items];
    if(myArray[index].done == 0) {
          myArray[index].done = 1; 
    } else {
          myArray[index].done = 0; 
     }
    this.setState({items: myArray})
 },

Collectives™ on Stack Overflow

Reactjs change the state of an object's property based on checked input

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related