I'm trying to update state inside a nested array with a map function and spread operator, but i don't understand how to get the key in the key/value pair to select a nested object .

In below code, when i try to implement multiple selection but i acheive only single selection in innerarray1 and how to update innerarray1 with original data using state, i try .. but not work can any one pls help how to multiselection data ?

I want multiple time circle selected when i click see below image it might have an idea i try to implement see below code , but i am stuck at a point , please help?

enter image description here

const [Data, setData] = useState([
  {
    id: 0,
    title: ' Cycling',
    Days: '3 Days completed',
    innerArray: [
      {
        id: 1,
        name: 'MON',
        image: require('../../../../assets/Images/rightWhite.png'),
        isselected: false,
      },
      {
        id: 2,
        name: 'TUE',
        image: require('../../../../assets/Images/rightWhite.png'),
        isselected: false,
      },
      {
        id: 3,
        name: 'WED',
        image: require('../../../../assets/Images/rightWhite.png'),
        isselected: false,
      },
      {
        id: 4,
        name: 'THU',
        image: require('../../../../assets/Images/rightWhite.png'),
        isselected: false,
      },
      {
        id: 5,
        name: 'FRI',
        image: require('../../../../assets/Images/rightWhite.png'),
        isselected: false,
      },
      {
        id: 6,
        name: 'SAT',
        image: require('../../../../assets/Images/rightWhite.png'),
        isselected: false,
      },
      {
        id: 7,
        name: 'SUN',
        image: require('../../../../assets/Images/rightWhite.png'),
        isselected: false,
      },
    ],
  },
  {
    id: 1,
    title: ' Bath',
    Days: '4 days compelted',
    innerArray: [],
  },
]);

const onClick = (innerData, item) => {
  //i am stuck in this section

  let data1 = Data.map((val) => {
    if (val.id == item.id) {
      let innerarray1 = val.innerArray.map((value) => {
        //  console.log("innervalue is====>",value)
        if (value.id == innerData.id) {
          return { ...value, isselected: !value.isselected };
        } else {
          return { ...value };
        }
      });
      // console.log("inner arrayData is====", innerarray1);
    } else {
      return { val };
    }
  });
};

<View>
  <FlatList
    data={Data}
    style={{ marginBottom: 200 }}
    renderItem={({ item }) => (
      <View>
        <View style={{ height: hp('2%') }}></View>
        <View
          style={{
            height: hp('17%'),
            width: wp('80%'),
          }}
        >
          <View
            style={{
              height: hp('5%'),
              width: wp('70%'),
              flexDirection: 'row',
              alignSelf: 'center',
            }}
          >
            <View
              style={{
                height: hp('5%'),
                width: wp('30%'),
                justifyContent: 'center',
              }}
            >
              <Text>{item.title}</Text>
            </View>
            <View
              style={{
                height: hp('5%'),
                width: wp('40%'),
                justifyContent: 'center',
              }}
            >
              <Text>{item.Days}</Text>
            </View>
          </View>
          <FlatList
            data={item.innerArray}
            horizontal={true}
            showsHorizontalScrollIndicator={false}
            showsVerticalScrollIndicator={false}
            style={{ marginTop: 10, marginLeft: wp('2%') }}
            renderItem={({ item: innerData, index }) => (
              // {selectedData(innerData)}
              <View
                style={{
                  height: hp('10%'),
                  justifyContent: 'space-between',
                  width: wp('12%'),
                }}
              >
                <View style={{ height: hp('4%') }}>
                  <Text>{innerData.name}</Text>
                </View>
                <TouchableOpacity
                  style={styles.circleView1}
                  onPress={() => {
                    // onSelect(innerData , item)
                    onClick(innerData, item);
                  }}
                >
                  <Text></Text>
                </TouchableOpacity>
              </View>
            )}
          />
        </View>
      </View>
    )}
  />
</View>;

I'm trying to update state inside a nested array with a map function and spread operator, but i don't understand how to get the key in the key/value pair to select a nested object .

CodePudding user response：

You have to just change your onClick function like below, with that you can achieve multiple selection

 const onClick = (innerData, item) => {
    console.log('innerData ',innerData);
    console.log('item ',item);
    let data1 = Data.map((val) => {
      if (val.id == item.id) {
        let innerarray1 = val.innerArray.map((value) => {
          //  console.log("innervalue is====\>",value)
          if (value.id == innerData.id) {
            return { ...value, isselected: !value.isselected };
          } else {
            return { ...value };
          }
        });
        console.log("inner arrayData is====", innerarray1);
        return {...val, innerArray : innerarray1};
      } else {
        return { val };
      }
        
    });
    console.log("Data1 is====", data1);
    setData(data1);
  };

CodePudding user response：

you can update your state like this
[1]: https://i.stack.imgur.com/q0lh6.png