React hooks: Dynamically mapped component children and state independent from parent

I am gathering posts (called latestFeed) from my backend with an API call. These posts are all mapped to components and have comments. The comments need to be opened and closed independently of each other. I’m governing this mechanic by assigning a piece of state called showComment to each comment. showComment is generated at the parent level as dictated by the Rules of Hooks.

Here is the parent component.

import React, { useState, useEffect } from "react";

import { getLatestFeed } from "../services/axios";

import Child from "./Child";

const Parent= () => {
    const [latestFeed, setLatestFeed] = useState("loading");
    const [showComment, setShowComment] = useState(false);

    useEffect(async () => {
        const newLatestFeed = await getLatestFeed(page);
        setLatestFeed(newLatestFeed);
    }, []);

    const handleComment = () => {
        showComment ? setShowComment(false) : setShowComment(true);
    };

    return (
        <div className="dashboardWrapper">
            <Child posts={latestFeed} showComment={showComment} handleComment={handleComment} />
        </div>
    );
};

export default Parent;

latestFeed is constructed along with showComment. After latestFeed comes back with an array of posts in the useEffect hook, it is passed to the child show here:

import React, { useState } from "react";


const RenderText = ({ post, showComment, handleComment }) => {
    return (
        <div key={post._id} className="postWrapper">
            <p>{post.title}</p>
            <p>{post.body}</p>
            <Comments id={post._id} showComment={showComment} handleComment={() => handleComment(post)} />
        </div>
    );
};

const Child = ({ posts, showComment, handleComment }) => {
    return (
        <div>
            {posts.map((post) => {
                 <RenderPosts posts={posts} showComment={showComment} handleComment={handleComment} />;
            })}
        </div>
    );
};

export default Child;

However, whenever I trigger handleComments, all comments open for all posts. I’d like them to be only the comment that was clicked.

Thanks!

>Solution :

You’re attempting to use a single state where you claim you want multiple independent states. Define the state directly where you need it.

In order to do that, remove

const [showComment, setShowComment] = useState(false);

const handleComment = () => {
    showComment ? setShowComment(false) : setShowComment(true);
};

from Parent, remove the showComment and handleComment props from Child and RenderText, then add

const [showComment, handleComment] = useReducer(state => !state, false);

to RenderText.