How can I manage separate button presses using State?

Corey Sutton 0
Viewed 22

I am creating a simple quiz app. I am using state to manage if the answer buttons are pressed or not.

Currently, when the user presses an incorrect answer, all of the incorrect answers change in color. In hindsight, this should have been obvious.

My question is, If I have four possible answers per page, how can I keep incorrect answers separate from one another?

Relevant code:

const {colors} = useTheme();

var [isPress, setIsPress] = React.useState(false);

const wrongAnswer = () => {
    setIsPress(current => !current)
    if(isPress){
        console.log("isPress = true")
    }
    else{
        console.log("isPress = false")
    }
}


<Button
        onPress={wrongAnswer}
        style = {{
            backgroundColor: isPress ? 'red' : '#daeaf6',
             
            width: 150,
            height: 60,
            borderWidth: 5,
            borderRadius: 15,
            borderColor: '#0a2941',
            marginRight: 40,
            marginLeft: 10}}
            >
            <Text style={{ color: isPress ? 'black' : '', textAlign:'center'}}>Belt</Text>
            
        </Button>
react-native
1 Answers

You can set a unique id for each answer and you pass this id to the onPressAnswer function.

For example:

const [chosenId, setChosenId] = useState('')

const onPressAnswer = (id) => setChosenId(id)

<Button
  onPress={() => onPressAnswer('answer1')}
  style={{
    backgroundColor: chosenId === 'answer1' ? 'red' : '#daeaf6',

    width: 150,
    height: 60,
    borderWidth: 5,
    borderRadius: 15,
    borderColor: '#0a2941',
    marginRight: 40,
    marginLeft: 10
  }}>
  <Text style={{ color: chosenId === 'answer1' ? 'black' : '', textAlign: 'center' }}>Belt</Text>
</Button>
NamTran0
Related