I’m working on making nested comments that have collapsible replies. To do this I simply render all comments in a flatlist in the order that I receive them and then add a margin to the left based on the level attribute that each item has. The incoming comment data is as follows.
{
id: "1a",
parent: "a",
author: "joemorgan",
body: "Such an amazing car, had seen this one in Paris earlier!",
level: 0,
replies: ["4w", "2f"]
},
{
id: "4w",
parent: "1a",
author: "jason",
body: "Truly a beast",
level: 1,
replies: []
},
{
id: "2f",
parent: "1a",
author: "katparis",
body: "Rightly said",
level: 1,
replies: []
},
I then render these comments using the following flatlist
<FlatList
data={SAMPLE_COMMENTS}
keyExtractor={item=>item.id.toString()}
renderItem={Comment body={item.body} level={item.level} commentId={item.id} commentChildren={item.replies} />}
/>
Finally, I have wrapped the actual comment component in a Collapsible (react-native-collapsible package). This way I can collapse the specific comment by tapping on it. The ‘collapsed’ prop is set using isCollapsed state.
const [isCollapsed, setIsCollapsed] = useState(false);
<Collapsible collapsed={isCollapsed}>
<TouchableWithoutFeedback onPress={()=> setIsCollapsed(true) }>
<View style={styles.container}>
</View>
</TouchableWithoutFeedback>
</Collapsible>
With the above code, I can collapse each individual comment by tapping on it.
The problem is I don’t want to collapse the comment I’m pressing on. I want to collapse its children, to do that I really want to know how I can manipulate the isCollapsed state for the children of a parent comment without affecting the said parent comment. Since every comment has a unique id, I believe it could possibly be done using it perhaps? The children of every comment is also an attribute so maybe that could help as well.
Any leads would be very helpful. Thanks