Add and remove objects from array using checkboxes

Question

I have implemented check-boxes on a screen in react native and what I am trying to achieve is that upon selection of checkbox it would add that object to an array and upon unchecking it would remove it from the array.

I have tried using filter method as well as loops but it doesn't work the way it is required.

for (let i = 0; i<tmp.length; i++){
    console.log("length",tmp.length)
    if(tmp.id == item.id){
        tmp.splice(tmp.indexOf(item.id),1);
        // tmp.pop(item)
        console.log("POP")
    }
    else {
        tmp.push(item);
            console.log("PUSH")
    }
}

My array of objects is as follows:

contacts:[
    {name:'a', id:1, plant:3},
    {name:'b', id:2, plant:1},
    {name:'c', id:3, plant:1}
],

Code for checkboxes:

<CheckBox
    checked={this.state.selectedCheckList.includes(item.id)? true:false}
    onPress={()=>this.onCheckboxPress(item)} color={"#8BC63E"}
/>

I expect the array that I am creating in tmp to be dynamic, in such a way that it removes and adds whole specific objects from the array.

Before:

tmp:[
    {name:'a', id:1, plant:3},
    {name:'b', id:2, plant:1},
    {name:'c', id:3, plant:1}
],

After:

tmp:[
    {name:'a', id:1, plant:3},
    {name:'c', id:3, plant:1}
],

Samuli Hakoniemi · Accepted Answer · 2019-06-03 11:53:05Z

1

Although this question is React Native related, all the answers are HTML+JS.

The solution is to create a new array out of existing one and append it to the state:

onCheckboxPress = (item) => {
  const selectedCheckList = contacts.filter((contact) => contact.id !== item.id);

  this.setState({ selectedCheckList });
}

And then in the component, you check the state with:

<CheckBox
  checked={() => this.isInList(item)}
  onPress={()=>this.onCheckboxPress(item)} color={"#8BC63E"}
/>

where the function looks like:

isInList = (item) => {
  const { selectedCheckList } = this.state;

  return selectedCheckList.some((listItem) => listItem.id === item.id);
}

Hope this helps you on.

answered Jun 3, 2019 at 11:53

Samuli Hakoniemi

19.1k1 gold badge64 silver badges79 bronze badges

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

Comments

user6680983 · Accepted Answer · 2019-06-03 10:56:24Z

Try this::

var arr=[];

function change(checkbox)
{
  if(checkbox.checked == true)
  {
    arr.push(checkbox.value);
  }
  else
  {
     var j = arr.indexOf(checkbox.value);
     arr.splice(j, 1);
  }
  
  var stringArr=arr.join(',');
  document.getElementById('display').innerHTML=stringArr;
}

<div>
  <label>
    <input type="checkbox" name="check" value="Check 1" onchange="change(this)">A</label>
  <label>
    <input type="checkbox" name="check" value="Check 2" onchange="change(this)">B</label>
  <label>
    <input type="checkbox" name="check" value="Check 3" onchange="change(this)">C</label>
  <label>
    <input type="checkbox" name="check" value="Check 4" onchange="change(this)">D</label>
</div>
<div id="display">
</div>

Collectives™ on Stack Overflow

Add and remove objects from array using checkboxes

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related