Trouble getting states to work in react native

Question

I'm pretty new to the idea of states in react native and have trouble using them to change the states of the components. I have three text components one which is a question and another two are answers (yes and no), and another text component that checks if my answer to the question is write, so the check text component. When I click on yes for a certain question the state of the last check component should change to 'right' if the answer was yes or to 'wrong' if the answer is no. So basically, this is what I want to do :

This is what I have so far:

This is the error I get :

This is the code I have so far:

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Alert, ScrollView, Image } from 'react-native';
// import TextComp from './components/Home2'
export default function App() {

  const [answer, setAnswer] = useState('answer');
  const [correctAns, setCorrectAns] = useState('');

  const useEffect = () => {
    if (answer == 'answer') {
      setCorrectAns('please answer!');
    } else if (answer == 'Yes') {
      setCorrectAns('Right');
    } else if (answer == 'No') {
      setCorrectAns('Wrong');
    };
  };
  const corAns = () => { Alert('Your answer was ', correctAns) }

  return (
    <ScrollView style={styles.container}>

      <View style={{ alignItems: 'center' }}>

        <Image source={require('./images/pic.jpeg')} style={styles.uriImg} />

        <Text style={styles.title}>Is this Mt. Fuji?</Text>
        <TouchableOpacity
          onPress={() => setAnswer('Yes')}>
          <Text style={styles.text}>Yes</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => setAnswer('No')}>
          <Text style={styles.text}>No</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={corAns}>
          <Text style={styles.text2}>Check</Text>
        </TouchableOpacity>

        <Image source={require('./images/yellow.png')} style={styles.uriImg} />

        <Text style={styles.title}>Is this red color?</Text>
        <TouchableOpacity
          onPress={() => setAnswer('Yes')}>
          <Text style={styles.text}>Yes</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => setAnswer('No')}>
          <Text style={styles.text}>No</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={corAns}>
          <Text style={styles.text2}>Check</Text>
        </TouchableOpacity>
      </View>
    </ScrollView>);
}

Can anyone tell me how it could be done? Thanks!

Answer 1

use useEffect like this

useEffect(() => {
 if (answer === 'Yes') {
  Alert.alert('Right')
 }
 if (answer === 'No') {
 Alert.alert('Wrong')
 }
}, [ answer ])

or by pressing check button

   const checkAnswer = () => {
     if (answer === 'Yes') {
      Alert.alert('Right')
     }
     if (answer === 'No') {
     Alert.alert('Wrong')
     }
     if (answer === 'answer') {
          Alert.alert('please answer')
     }
    }
    
    

set check button onPress={checkAnswer}