Блог

Я визуализирую список элементов из файла json, я хочу, чтобы каждый компонент в списке имел свое собственное состояние. И будьте независимы от других элементов в списке. Я хочу, чтобы только один элемент был доступен для кликабельности, а не какие-либо другие, не такие, как показано на рисунке ниже. [1]: https://i.stack.imgur.com/vdCnR.png

Вот код, который я сейчас использую.

 {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 amp;amp; "danger"}
    style={{ marginBottom: 6, width: "100%" }}
  >
    <Text
      style={{
        textTransform: "uppercase",
        textAlign: "center",
      }}
    >
      {ans.value}
    </Text>
  </Card>
);
 

};