jeudi 11 avril 2019

react semantic ui checkboxes,how to toggle single element?

I'm mapping an array and for each element I'm adding checkbox. Checkbox has an attribute "checked" and depending on state toggles it. But when I clicking for one checkbox , it toggles all checkboxes. How to toggle for a single checkbox?

      let respondent = data.map((item, idx) => {
  const { personalData, status_id } = item
  return (
    <div key={idx} className="respondents-list_item">
      <Checkbox
        onClick={() => this.addCheckedToArray(status_id)}
        checked={isChecked}
      />
      <div className="respondents-line">
        <div>
          {personalData.name}
        </div>
      </div>
    </div>
  )
})

addCheckedToArray(id) {
    const { arrayOfStatusId } = this.state
    this.setState({
      isChecked: !this.state.isChecked,
    })
    if (arrayOfStatusId.includes(id)) {
      let index = arrayOfStatusId.indexOf(id)
      arrayOfStatusId.splice(index, 1)
    } else {
      arrayOfStatusId.push(id)
    }
  }




Aucun commentaire:

Enregistrer un commentaire