how can i dynamically bind each state to each checkbox when using map function

Question

I m doing something like this but the value is been taken as string and not as a variable with boolean value

        {question.data.map((value, i) => (
            <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
                <CheckBox value={`this.state.checked${i}`} onValueChange={() => this.toggleCheckBox(i)} />
                <Text>{value.question}</Text>
            </View>
            ))
        }

this is my toggleCheckBox method

      toggleCheckBox(i) {
         this.setState({ [`checked${i}`]: ![`this.state.checked${i}`] });
      }

need help.

Katherine R · Accepted Answer · 2018-09-19 10:17:44Z

1

The issue is with adding string interpolation around this.state

toggleCheckBox(i) {
 this.setState({ [`checked${i}`]: !this.state[`checked${i}`] });
}


{question.data.map((value, i) => (
    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
    <CheckBox value={this.state[`checked${i}`]} onValueChange={() => this.toggleCheckBox(i)} />
    <Text>{value.question}</Text>
    </View>
    ))
}

answered Sep 19, 2018 at 10:17

Katherine R

1,1581 gold badge10 silver badges22 bronze badges

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

1 Comment

Sumit Over a year ago

that worked ... thanks a lot for your help. have a nice day. :)

Collectives™ on Stack Overflow

how can i dynamically bind each state to each checkbox when using map function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related