Creating nested comments in React Native

Question

I am working on a React Native project with Nested comment section. Comments are fetched as JASON data and rendered through a FlatList.

export default App = () => {
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);

  const getQuestions = async () => {
    try {
      const response = await fetch('https://..../api/q/289');
      const json = await response.json();
      setData(json);
    } catch (error) {
      console.error(error);
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    getQuestions();
  }, []);


  const addCommentReply = () => {
    var newData = [
      {
        "qid": "540",
        "aid": "540",
        "content": "New Comment/Reply",
        "privacy": "true",
        "uid": "23",
        "name": "Jhone",
      },
    ];
    setData(data.concat(newData));
  }


  return (
    <Screen>
        <FlatList
          data={data}
          keyExtractor={({ qid }, index) => qid}
          renderItem={({ item }) => (
            <AppCommentReply content={item.content} uname={item.name} />
          )}
        />
      <CommentBox>
        <Button title="Add element" onPress={addCommentReply} />
      </CommentBox>
    </Screen>
  );
};

Is FlatList a correct approach for a nested comment section?
With {addCommentReply} i can add a comments to the main array stream. but when someone is replying to a comment, to render replies, I'm thinking of pushing that data just below the corresponding "qid" in the array. How to push data into the middle of the array?

Michael Bahl · Accepted Answer · 2021-08-04 17:15:39Z

1

The spread operator is helpful to insert an element into array:

function insert(arr, index, item) {
  return [
      ...arr.slice(0, index),
      item,
      ...arr.slice(index)
 ];
};

answered Aug 4, 2021 at 17:15

Michael Bahl

3,7091 gold badge15 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Creating nested comments in React Native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related