CODEWITHSUNDEEP
javascriptreact-nativecheckboxstate
crodev
crodev

Reputation: 1491

How to control checkbox "checked" value with unknown amount of checkboxes

So I have a screen where I render unknown amount of checkboxes depending on the list size. How can I control "checked" value of these boxes?
I am using react-native-elements for checkboxes.

Render method for checkboxes: 

    _showChoices = (list) => {
        return list.map((item, i) => {
            return (
                <CheckBox
                title={item.choice_name}
                checked={}
                size={25}
                onIconPress={() => {}}
                onPress={() => {}}
                key={item.choice_id}
                />
            )
        })
    }

If you need any more info please comment.

Thanks!

Upvotes: 2

Views: 416

Answers (1)

Mohammed Ashfaq
Mohammed Ashfaq

Reputation: 3426

You can add the isChecked property with each item and on Pressing the checkbox. You can update the isChecked property.

this.state = {
 list = [
   { choice_id: 12, choice_name:"bluetooth", isChecked: false},
   { choice_id: 23, choice_name:"wifi", isChecked: false},
   { choice_id: 34, choice_name:"hotspot", isChecked: false},
]
 
}

_showChoices = (this.state.list) => {
        return list.map((item, i) => {
            return (
                <CheckBox
                  title={item.choice_name}
                  checked={item.isChecked}
                  size={25}
                  onIconPress={() => {}}
                  onPress={() => {
                    let clonedList = this.state.list.slice();
                    clonedList[i].isChecked = !clonedList[i].isChecked
                    this.setState({list: clonedList})}}
                  }
                  key={item.choice_id}
                />
            )
        })
    }

Upvotes: 1

Related Questions