Estoy representando una lista de elementos de un archivo json. Quiero poder permitir que cada componente de la lista tenga su propio estado. Y ser independiente de los demás elementos de la lista. Quiero tener solo un elemento para poder hacer clic y ninguno de los otros, no como lo que se muestra actualmente en la imagen a continuación. [1]: https://i.stack.imgur.com/vdCnR.png

Aquí está el código que estoy usando actualmente.

 {questions .filter((question) => question.id === currentId) .map((question, index) => { return ( <> <View key={index}> {question.title.hasOwnProperty("main") ? ( <> <Text style={styles.title}>{question.title.main}</Text> <Text style={styles.subtext}>{question.title.sub}</Text> </> ) : ( <Text style={styles.title}>{question.title}</Text> )} </View> <View> {question.answers.map((ans, i) => ( <Answer id={ans.id} key={ans.id} ans={ans} /> ))} </View> </> ); })} const Answer = ({ ans, id }) => { const [clkStatus, setClkStatus] = useState(false); const [ansId, setAnsId] = useState(id); return ( <Card onPress={() => { if (ansId === id) { setClkStatus(true); } }} status={clkStatus && "danger"} style={{ marginBottom: 6, width: "100%" }} > <Text style={{ textTransform: "uppercase", textAlign: "center", }} > {ans.value} </Text> </Card> );

};