change value if the checkbox is checked reactjs

I refactored your code a bit, and forked you pen here: http://codepen.io/mrlew/pen/wgPjre

I created a myItems array into states, that is constructed based on your allElements and selectedElements props.

In your constructor:

const myItems = props.allElements.map( (item) => {
  return {
    value: item,
    checked: (props.selectedElements.indexOf(item) > -1)
  }
})

Each item os this array keeps track of the checked property, as the value.

Also, you can call the updateStateList in the callback appending .bind with a parameter (docs here). This way, you're setting the this context and also setting an extra parameter. Very useful in this case.

onClick={this.updateStateList.bind(this, item)}

The updateStateList method first create a new array with the new values (with map), and setState with this new Array:

  updateStateList(selectedItem, e){
    let myNewItems = this.state.myItems.map( (item) => {
      if (item.value == selectedItem.value) item.checked = !selectedItem.checked
      return item
    })
    this.setState({myItems: myNewItems})
  }

I took the liberty of removing other stuff.

Hope it helps!

Note: passing props as a initial state is only considered a recommended pattern if your parent component does not care about the result, because you will desynchronize your data (two sources of thruth). The "correct" approach would be to let some parent do the transformation, and your set-of-checkbox only pass up user click events and receive the already-computed array object.