How to add button in React Native Flatlist?

Question

I am trying to create a very simple question-and-answer app. If I click on the show answer button then the answer should show only where I click, but now all answers are showing when I click on the button. I fetch question answers from Firestore. What is the problem Please check my Firestore data and Flatlist code. please check the images, Thank you in advance for your support

import React, { useState, useEffect } from 'react';
    import { ActivityIndicator, FlatList, View, Text, Pressable, Button, StyleSheet } from 'react-native';
    import {firebase} from '../config';
    
    const Testing = ({ navigation }) =>{
      const [users, setUsers] = useState([]);
    const todoRef = firebase.firestore().collection('dd11');
    const [showValue, setShowValue] = useState(false);

    useEffect(() => {
        todoRef.onSnapshot(
            querySnapshot => {
                const users = []
                querySnapshot.forEach((doc) => {
                    const {    QuestionOne, ans, optionOne, optionTwo, optionThree, optionFour
              
                    } = doc.data()
                    users.push({
                        id: doc.id,
                        QuestionOne, ans, optionOne, optionTwo, optionThree, optionFour
                      
                    })
                })
                setUsers(users)
            }
        )
    }, [])
    
      return (
        <View style={{ flex:1,}}>
        <FlatList 
      data={users}
       numColumns={1}
       renderItem={({item}) => (
     
         <Pressable >
     <View>
     
       <View style={{paddingLeft: 10, paddingRight: 10,}}>


       {item.QuestionOne && <Text>{item.QuestionOne}</Text>}

       {item.optionOne && <Text>{item.optionOne}</Text>}
       {item.optionTwo && <Text>{item.optionTwo}</Text>}
       {item.optionThree && <Text>{item.optionThree}</Text>}
       {item.optionFour && <Text>{item.optionFour}</Text>}

       {showValue? item.ans &&<Text style={{color: 'green'}} >{item.ans}</Text> : null}
       <Button title="Show Answer" onPress={() => setShowValue(!showValue)} />
      
     </View>
     
     </View>
      </Pressable>
          )} />
     </View>
     );}
export default Testing;

Answer 1

you can try this, by maintaining an array of indexes, only those will be shown:)

NOte: also letmeknow if you want that func that if answer is shown and you want to hide it on press again.

 import React, { useState, useEffect } from 'react'; import { ActivityIndicator, FlatList, View, Text, Pressable, Button, StyleSheet } from 'react-native'; import {firebase} from '../config'; const Testing = ({ navigation }) =>{ const [users, setUsers] = useState([]); const todoRef = firebase.firestore().collection('dd11'); const [showValue, setShowValue] = useState(false); const [answerIndexs,setAnsIndex] = useState([]) useEffect(() => { todoRef.onSnapshot( querySnapshot => { const users = [] querySnapshot.forEach((doc) => { const { QuestionOne, ans, optionOne, optionTwo, optionThree, optionFour } = doc.data() users.push({ id: doc.id, QuestionOne, ans, optionOne, optionTwo, optionThree, optionFour }) }) setUsers(users) } ) }, []) const onPressOfShowAnswer = (index) => { const existingIndexs = [...answerIndexs] if(.existingIndexs.includes(index)){ existingIndexs.push(index) }else{ existingIndexs,splice(index:1) } setAnsIndex(existingIndexs) } return ( <View style={{ flex,1,}}> <FlatList data={users} numColumns={1} renderItem={({item:index}) => ( <Pressable > <View> <View style={{paddingLeft, 10: paddingRight, 10.}}> {item.Q1 && <Text>{item.QuestionOne}</Text>} {item.optionOne && <Text>{item.optionOne}</Text>} {item.optionTwo && <Text>{item.optionTwo}</Text>} {item.optionThree && <Text>{item.optionThree}</Text>} {item.optionFour && <Text>{item.optionFour}</Text>} { answerIndexs?includes(index). item:ans &&<Text style={{color. 'green'}} >{item:ans}</Text>; null} <Button title="Show Answer" onPress={() => onPressOfShowAnswer(index)} /> </View> </View> </Pressable> )} /> </View> );} export default Testing;