React-native adding components to array and accessing them

Question

I'm trying to make some sort of quiz, and I want to have all the boxes in a FlatList. I want all of them to be hidden, except for the first one, and that when you answer it the next question appears. Here is my code:

const TYPE = [{id:"1",title:"first question",options:["option 1","option 2"],correct:1},{id:"2",title:"secondquestion",options:["option 1","option 2"],correct:0}];
const answer=a=>Alert.alert(a == 0 ? 'wrong' : 'correct');
const Item = ({info}) => (
    <View style={styles.item}>
      <Text style={styles.title}>
        {info.title}
      </Text>
      <TouchableOpacity style={styles.button} onPress={() => info.correct == 0 ? answer(1) : answer(0)}>
        <Text>
          {info.options[0]}
        </Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.button} onPress={() => info.correct == 1 ? answer(1) : answer(0)}>
        <Text>
          {info.options[1]}
        </Text>
      </TouchableOpacity>
    </View>
);
function HomeScreen({ navigation }) {
  return (
    <View style={styles.homescreen}>
      <Text style={styles.homeTitle}>
        Welkom!
      </Text>
      <Text style={styles.homeIntro}>
        Play the test, yes?
      </Text>
      <TouchableOpacity style={styles.homeButton} onPress={() => navigate(navigation, "Type")}>
        <Text style={styles.homeButtonText}>
          Start the Test!
        </Text>
      </TouchableOpacity>
    </View>
  )
}
function type() {
  const renderItem = ({ item }) => <Item info={item} />;

  return (
    <View style={styles.container}>
      <FlatList
        data={TYPE}
        renderItem={renderItem}
        keyExtractor={item => item.id}
        style={styles.list}
      />

      <StatusBar style="auto" />
    </View>
  );
}
export default function App() {
  console.log("Starting...");
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Type" component={type} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

My approach to this would be to add all s into an array, so that I can simply do this: itemArray[i].style.display='None' or something like that.

Answer 1

Try below code that could help to achieve what you want:

import React from 'react';
import {
  Alert,
  StatusBar,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';

const TYPE = [
  {
    id: '1',
    title: 'first question',
    options: ['option 1', 'option 2'],
    correct: 1,
  },
  {
    id: '2',
    title: 'secondquestion',
    options: ['option 1', 'option 2'],
    correct: 0,
  },
];

const Item = ({info, onPressOption}) => (
  <View style={styles.item}>
    <Text style={styles.title}>{info.title}</Text>
    <TouchableOpacity style={styles.button} onPress={() => onPressOption(0)}>
      <Text>{info.options[0]}</Text>
    </TouchableOpacity>
    <TouchableOpacity style={styles.button} onPress={() => onPressOption(1)}>
      <Text>{info.options[1]}</Text>
    </TouchableOpacity>
  </View>
);

function HomeScreen({navigation}) {
  return (
    <View style={styles.homescreen}>
      <Text style={styles.homeTitle}>Welkom!</Text>
      <Text style={styles.homeIntro}>Play the test, yes?</Text>
      <TouchableOpacity
        style={styles.homeButton}
        onPress={() => navigate(navigation, 'Type')}>
        <Text style={styles.homeButtonText}>Start the Test!</Text>
      </TouchableOpacity>
    </View>
  );
}

function QuestionScreen({navigation}) {
  const [activeQuestionIndex, setActiveQuestionIndex] = React.useState(0);

  const showAlert = (isCorrect, onPress) => {
    Alert.alert(isCorrect ? 'correct' : 'wrong', null, [
      {
        onPress,
      },
    ]);
  };

  const onPressOption = (optionIndex) => {
    const isCorrectOption = TYPE[activeQuestionIndex].correct === optionIndex;

    showAlert(isCorrectOption, () => {
      isCorrectOption && setActiveQuestionIndex(activeQuestionIndex + 1);
    });
  };

  return (
    <View style={styles.container}>
      <StatusBar style="auto" />
      <Item info={TYPE[activeQuestionIndex]} onPressOption={onPressOption} />
    </View>
  );
}