Toggle a button selection on same and others in React (Javascript)? - react-native

Question

I have a form with a question and 3 answers. Only one answer can be selected so I need to toggle each answer individually AND toggle between the 3.
I put an incoming array of objects into state on component load and iterate over that data. I add in a selected key to each object of the array with boolean which will be deleted before form submit.
Right now the behavior is that I'm able to toggle the same button but clicking another does change the previous selected but have to click again to select the new current. Obviously one crucial set is missing but not sure if I should set up a new state or if it can be done with the current config. Basically, the buttons should behave like checkboxes.
The code:
const answers = ['Frequency', 'Some Times', 'Hardly Ever'] // predefined
const ChecklistModal = ({ setShowModal, checklist }: any) => {
const [updatedList, setUpdatedList] = useState(
checklist.list.map((c) => ({
...c,
selected: !!c.answer, // added key with truthy value based on already chosen from
// backend or selected in form (frontend)
})),
)
// where the magic happens
const handleAnswer = (
answer: string,
questionId: number,
listIdx: number,
) => {
const listCopy = [...updatedList]
const list = listCopy[listIdx]
list.question = questionId
list.answer = answer
list.selected = !list.selected
listCopy[listIdx] = list
setUpdatedList(listCopy)
}
return (
<Modal>
<View style={[styles.container, containerByDevice]}>
// relevant code
{checklist.list.map((li, index) => (
<View key={li.question.id}>
<Text style={styles.questionText}>{li.question.title}</Text>
<View style={styles.answerRow}>
{answers.map((answer) => (
<View
key={answer}
style={
updatedList[index].selected &&
updatedList[index].answer === answer
? styles.selectedAnswerButton
: styles.answerButton
}
>
<TouchableOpacity
onPress={() => {
handleAnswer(answer, li.question.id, index)
}}
>
<Text>{answer}</Text>
</TouchableOpacity>
</View>
))}
</View>
</View>
))}
</View>
</Modal>
)
}
export default ChecklistModal
The initial checklist data looks like this:
checklist {
concern {
title
}
list {
question {
id
title
}
answer
}
}
}
}
`

Answer 1

You'll need to create another state which will store the selected answer and then add modify your condition like this: -
// state to store the selected answer
const [selectedAnswer, answer]= useState('');
// modify your condition
<View
key={answer}
style={
updatedList[index].selected &&
selectedAnswer == answer && // <== Add this condition
updatedList[index].answer === answer
? styles.selectedAnswerButton
: styles.answerButton
}
>
<TouchableOpacity
onPress={() => {
handleAnswer(answer, li.question.id, index)
}}
>
<Text>{answer}</Text>
</TouchableOpacity>
</View>
Also i have created a snack for your reference :- https://snack.expo.dev/#arjunshukla97/toggleanswer