How to select individual item in FlatList

Question

I am trying to select an individual item in a FlatList. The desired functionality is to click unfollow, and the specific item that has been clicked changes from 'unfollow' to 'follow'. So far, I have managed to complete this functionality, but the problem is that the change is made when I re-render the component manually.

Here is the code:

function FolloweringScreens({
    All my props here
}) {
  const [refresh, setRefresh] = useState(false);

  const onClickItem = (item, index) => {
    return item.isFollowed
      ? (item.isFollowed = false)
      : (item.isFollowed = true);
  };

  return (
    <>
      <FlatList
        scrollEnabled={true}
        onEndReachedThreshold={0}
        refreshing={refresh}
        onRefresh={handleFetch}
        onEndReached={noMoreData || loadingMore ? null : handleMoreData}
        data={data}
        style={{marginTop: height * 0.07}}
        keyExtractor={(i, index) => index.toString()}
        renderItem={({item, index}) => {
          return (
            <>
              <TouchableHighlight
                style={styles}
                underlayColor="transparent"
                onPress={() => navigation.navigate('Profile page', {item})}>
                <View
                  style={styles}>

                  {User avatar and users Name components here}

                  {screen === 'Followers' ? (
                    <View>
                      <TouchableHighlight
                        underlayColor="transparent"
                        style={{marginLeft: 0}}
                        onPress={() => {
                          item.isFollowing
                            ? onClickItem(item, index)
                            : onClickItem(item, index);
                        }}>
                        {item.isFollowing ? (
                          <Text>Unfollow</Text>
                        ) : (
                          <Text>Follow</Text>
                        )}
                      </TouchableHighlight>
                    </View>
                  ) : (
                    <View>
                      <TouchableHighlight
                        underlayColor="transparent"
                        style={{marginLeft: 0}}
                        onPress={() => {
                          item.isFollowed
                            ? onClickItem(item, index)
                            : onClickItem(item, index); <<<<-- This is where I am selecting the item
                        }}>
                        {item.isFollowed ? (
                          <Text>Unfollow</Text>
                        ) : (
                          <Text>Follow</Text>
                        )}
                      </TouchableHighlight>
                    </View>
                  )}
                </View>
              </TouchableHighlight>
            </>
          );
        }}
      />
    </>
  );
}

export default FolloweringScreens;

Answer 1

I managed to fix it by altering the inital data when the unfollow or follow button is clicked. here is the code:

function FolloweringScreens({
  bunch of props here,
  data,
  setfollowingData,
}) {
  const [refresh, setRefresh] = useState(false);
  const [stateData, setStateData] = useState();

  useEffect(() => {
    setStateData(data);
  }, [data]);

    const onClickItem = (item, index) => {
    const newArrData = data.map((e, index) => {
      if (item.profileName === stateData[index].profileName) {
        item.isFollowed
          ? unfollowUser(username, item.profileName)
          : followUser(username, item.profileName);
        return {...e, isFollowed: !stateData[index].isFollowed};
      }
      return {
        ...e,
        isFollowed: true,
      };
    });
    setfollowingData(newArrData);
  };

  return (
    <>
      <FlatList
        scrollEnabled={true}
        onEndReachedThreshold={0}
        refreshing={refresh}
        onRefresh={handleFetch}
        onEndReached={noMoreData || loadingMore ? null : handleMoreData}
        data={stateData}
        style={{marginTop: height * 0.07}}
        keyExtractor={(i, index) => index.toString()}
        renderItem={({item, index}) => {
          return (
            <>
              <TouchableHighlight
                style={styles}
                underlayColor="transparent"
                onPress={() => navigation.navigate('Profile page', {item})}>
                <View
                  style={styles}>

                  {User Avatar and User Username components here}

                  {screen === 'Followers' ? (
                    <View>
                      <TouchableHighlight
                        underlayColor="transparent"
                        style={{marginLeft: 0}}
                        onPress={() => {
                          // item.isFollowing
                          //   ? unfollowUser(username, item.profileName)
                          //   : followUser(username, item.profileName);
                          item.isFollowing
                            ? onClickItem(item, index)
                            : onClickItem(item, index);
                        }}>
                        {item.isFollowing ? (
                          <Text>Unfollow</Text>
                        ) : (
                          <Text>Follow</Text>
                        )}
                      </TouchableHighlight>
                    </View>
                  ) : (
                    <View>
                      <TouchableHighlight
                        underlayColor="transparent"
                        style={{marginLeft: 0}}
                        onPress={() => {
                          // item.isFollowed
                          // ? (item.isFollowed = false)
                          // : // unfollowUser(username, item.profileName)
                          //   followUser(username, item.profileName);
                          item.isFollowed
                            ? onClickItem(item, index)
                            : onClickItem(item, index); <-This is where item is selected
                        }}>
                        {item.isFollowed ? (
                          <Text>Unfollow</Text>
                        ) : (
                          <Text>Follow</Text>
                        )}
                      </TouchableHighlight>
                    </View>
                  )}
                </View>
              </TouchableHighlight>
            </>
          );
        }}
      />
    </>
  );
}

export default FolloweringScreens;