add/remove elements to array with checkboks and reactjs

Question

I have this code that inserts the ids of the checkboks into an array, but if I disable them, it does not remove them, i use update to react-addons-update any suggestions

     constructor(props) {
        super(props);
         this.state={
           keyGen:[]
         }
      }
      render(){  
         <form> 
            {this.renderElements()}
             <input type="submit" value="Save" />
        </form>
      renderElement(){
       return this.props.Elements.map((item, index)=>{
render(
        <Input name='list' type='checkbox' onClick={()=>this.updateStateList(item.id)} label='Add' className='listTour' />
       ) 
        })
        }

      updateStateList(value){
        this.setState(update(this.state, {keyGen: {$push:[value]}}))
        console.log(this.state.keyGen)
      }

thanks

if you uncheck the checkbox, it doesn't remove the items from the array? — Mabeh Al-Zuq Yadeek
– Mabeh Al-Zuq Yadeek, Commented Jan 26, 2017 at 2:29
I don't understand your question. What do you mean by "if I disable them"? — Mabeh Al-Zuq Yadeek
– Mabeh Al-Zuq Yadeek, Commented Jan 26, 2017 at 2:30
The idea is that when doing uncheck, remove the id from that checkbocks in the array — FERNANDO ORTIZ
– FERNANDO ORTIZ, Commented Jan 26, 2017 at 2:32
Just use array.filter() in the updateStateList method to return the array without the Id. First you check if the Id that was just clicked is present in the array via array.some(). If it is present, use array.filter() to filter the array out and set keyGen equal to the filtered array. — Mabeh Al-Zuq Yadeek
– Mabeh Al-Zuq Yadeek, Commented Jan 26, 2017 at 2:36

Umang Gupta · Accepted Answer · 2017-01-26 03:05:17Z

5

// modify render function like this.

You can see the working code here http://codepen.io/umgupta/pen/dNVoBg See console tab at the bottom

    class UpdateStateDemo extends React.Component {
      constructor(props) {
        super(props);
        this.state={keyGen:[]} 
      }

      render(){ 
        console.log(this.state)
        return (
        <form>
            {
              this.props.Elements.map((item, index)=>{  
                return (
                  <input 
                    key={item} 
                    name='list' 
                    type='checkbox' 
                    onClick={(e)=>this.updateStateList(e,item)}
                    label='Add' 
                    className='listTour' />
                ) 
             })  
            }
          <input type="submit" value="Save" />
        </form>
        )
      }

  updateStateList(e, value){
    console.log(e.target.checked)
    if (e.target.checked){
      //append to array
      this.setState({
        keyGen: this.state.keyGen.concat([value])
      })
    } else {
      //remove from array
      this.setState({
        keyGen : this.state.keyGen.filter(function(val) {return val!==value})
      })
   }
}
}

edited Jan 26, 2017 at 3:05

answered Jan 26, 2017 at 2:45

Umang Gupta

16.6k7 gold badges51 silver badges69 bronze badges

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

9 Comments

FERNANDO ORTIZ Over a year ago

It works thanks, but it's funny why when I do the first select it shows me the empty array you know why it can be

Umang Gupta Over a year ago

Because you have an empty array set in state?

FERNANDO ORTIZ Over a year ago

But if the user sends only one data, then send the empty array, how could solve it

Andrew Irwin Over a year ago

I tried many different stack overflow posts and solutions, I felt I could understand nearly all of them, but none of the them worked for, none of them removed the value from the arrary, but yours works, and its also simple cheers

Umang Gupta Over a year ago

@AndrewIrwin Thanks (especially for the appreciation)! I am glad that you found it helpful.

|

Collectives™ on Stack Overflow

add/remove elements to array with checkboks and reactjs

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related