React-native : How to make change in specific item of ScrollView

Question

I have a json response with nested array. I am using Accordion-Collapse-react-native library to show this array in UI.

{
"accountLocationUid": "5f4f8644-f5da-4126-84da-9c35802fd8d4",
"accountUid": "5f5b02a1-beb0-40e8-8553-c62299869dff",
"accountLocationTypeCode": "LOCATION",
"locationName": "First Location",
"children": [{
        "accountLocationUid": "3000b1d7-4da4-45ab-b87c-2d41b867eea0",
        "accountUid": "5f5b02a1-beb0-40e8-8553-c62299869dff",
        "accountLocationTypeCode": "AREA",
        "locationName": "Area 4",
        "parentAccountLocationUid": "5f4f8644-f5da-4126-84da-9c35802fd8d4",
        "allowAddLocation": true,
        "children": [{

            "accountLocationUid": "8606de2a-1af0-4e81-ae11-df36000c4809",
            "accountUid": "5f5b02a1-beb0-40e8-8553-c62299869dff",
            "accountLocationTypeCode": "AREA",
            "locationName": "Area 2",
            "parentAccountLocationUid": "5f4f8644-f5da-4126-84da-9c35802fd8d4",
            "children": []
        }]
    }
]
}

Each item will have children array which is nested array. What I am trying to do is when user clicks on any item with nested elements, then it should be expand which is working fine but with this, the expand icon should also change to collapse. When I'm trying to change it, then it's changing to all it's elements.

Code what I've done:

const collapseView = (locationArray: any): any => {
return locationArray?.map((locationRight: any, index: number) => (
  <View key={locationRight?.accountLocationUid}>
    <View>
      <Collapse>
        <CollapseHeader>
          <View style={styles.itemRow}>
            {/* {locationRight?.children?.length > 0 ? <View><Text>{expanded ? 'Yes' : "No"}</Text></View> : null} */}
            {locationRight?.children?.length > 0 ? <Icon style={{ marginLeft: -10 }}
              size={24}
              color="black"
              name={expanded ? "chevron-right" : "chevron-down"} /> : null}
            <Text
              // onPress={() => setExpand(!expanded)}
              numberOfLines={1}
              style={styles.locationName}>
              {locationRight?.locationName}
            </Text>
            <PaperButton style={styles.paperButton}
              mode='outlined'
              color='#263238'
              uppercase={false}
              onPress={() => handlePermission(locationRight?.accountLocationUid)}>
              {_.isUndefined(permission) ? 'Allow' : getPermissionValue(locationRight?.accountLocationUid)}
            </PaperButton>
          </View>
          {/* {console.log("child " + locationRight.locationName + " and size is " + locationRight.children.length)} */}
        </CollapseHeader>
        <CollapseBody>
          <View style={{ marginLeft: 15 }}>
            {!_.isNull(JSON.stringify(locationRight?.children) || locationRight.children.length > 0)
              && collapseView(locationRight?.children)}
          </View>
        </CollapseBody>
      </Collapse>
    </View>
  </View>
))
}

with below code, I'm trying to change icon on expand and collapse.

{locationRight?.children?.length > 0 ? <Icon style={{ marginLeft: -5 }}
              size={24}
              color="black"
              name={expanded ? "chevron-right" : "chevron-down"} /> : null}

Only problem is, if I get expanded as true then the icon gets changes to every item instead of specific collapsed/expanded item. How can I get event for specific item? Library I'm using is Accordion-Collapse-react-native .

Answer 1

I have to save the index or id of an item that is being collapsed. So change onPress method as follows and create a new state for storing the index!

//ON TOP
const [currentIndex,setCurrentIndex]=useState(0);
// Down on the text component
onPress={() => setCurrentIndex(index)}

And when rendering you can use the index to check if it is expanded or collapsed

name={currentIndex === index ? "chevron-right" : "chevron-down"}