'I have a nested array where I update the value I select but it doesn't update

Good morning group, I know that it may have happened to many but I have my json in this way

[
    {
        "id": 1,
        "title": "Question 1",
        "answers": [
            {
                "options": 1,
                "right_ans": "yes"
            },
            {
                "options": 2,
                "right_ans": "NO"
            }
        ]
    },
    {
        "id": 2,
        "title": "Question 2",
        "answers": [
            {
                "options": 1,
                "right_ans": "yes"
            },
            {
                "options": 2,
                "right_ans": "NO"
            }
        ]
    }
]

I do the import and my code is as follows

import React, { useState, useEffect } from 'react';
import {SafeAreaView, TouchableOpacity, View,Text, FlatList , StyleSheet,Image, ActivityIndicator, Alert} from 'react-native';
import { CheckBox } from 'react-native-elements';
import articulos from './ArticulosActivos'

const App = () => {

  const [isLoading, setIsLoading ] = useState(true);
  const [data, setdata] = useState([]);

  useEffect(() => {  
    setdata(articulos);
   
  }, [])


  onChangeValue = (itemSelected, indexcharacter) => {


    console.log(indexcharacter+':'+itemSelected.options)

   
    const nextState =  data.map((list, i) =>
      list.id == i+1
        // Key matches, spread existing state and update list items array
        ? {
            ...list,
            answers: list.answers.map(item =>
              item.options === itemSelected.options
                // Item id match, spread existing item and update price
                ? {
                    ...item,
                    checked : !item.checked
                  }
                // No item id match, pass existing item
                : item
            )
          }
        // No key match, pass existing list
        : list
    )
          setdata(nextState)
  }

  renderItem = ({item, index}) => {
    return (
      <View>
        <Text>Nueov</Text>
          <View style={styles.item}>
            <Text>{item.title}</Text>

            <FlatList
                  data={item.answers}
                  renderItem={({ item }) => 
                <View>
                  {item.checked}
                  <CheckBox
                  key={item.options}
                  size={40}
                  checked={item.checked}
                  style={styles.ckItem}
                  onPress={()=> onChangeValue(item, index)}
                />
              <View style={styles.WrapText}>
                <Text>{item.right_ans}</Text>
              </View>
              </View>
                }
                  keyExtractor={item => item.options}
                />
          </View>
      </View>
    )
  }

  onShowItemSelected = () => {
     const listSelected = data.filter(item => item.checked == true);
     let contentAlert = '';
     listSelected.forEach(item=>{
       contentAlert =  contentAlert + `${item.id}.`+item.apartado+ `\n`;
     })
     Alert.alert(contentAlert);
  }

return (
  <SafeAreaView style={styles.container}>
      
      <FlatList 
        style={styles.list}
        data={data}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
  
    <View styles={styles.wrapButton}>
    <TouchableOpacity style={styles.button} onPress={onShowItemSelected}>
      <Text>Mostrar el elemento que seleccionados</Text>
    </TouchableOpacity>

    </View>
  </SafeAreaView>

)
}

const styles = StyleSheet.create({
  container:{
    flex:1
  },
  innerText:{
    textAlign: 'center',
    fontWeight: 'bold'
  },
  list: {
    flex:1,
    padding:10,
    marginBottom:50
  },
  wrapButton:{
    width: '100%',
    justifyContent: 'center',
    alignItems: 'center'
  },
  button:{
    padding: 16,
    backgroundColor: 'orange'
  },
  item:{
    flexDirection: 'row',
    marginTop: 8,
    padding: 4,
    shadowColor: '#000',
    shadowOffset:{
      width:0, height: 2
    },
    shadowOpacity: 0.15,
    shadowRadius: 4,
    elevation: 5
  },
  WrapText:{
    flex:1,
    marginTop: 16,
    marginLeft: 8
  },
  ckItem:{
    marginTop:5
  }
})

export default App;

This as objective is a set of checkbox where adding a field in the array is increasing and I will be able to have the final value of several answers, without having to write more code and create states for each selection

but unfortunately it is not validating the first step where I specify every time I select a checkbox all are selected

Preview



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source