How can I toggle only one Reactstrap Collapse?

Question

I'm developing a Next.JS application that lists some Github users and when I click on a especific user box, their box should toggle using Reactstrap's Collapse. But all boxes toggle at once, independent of the clicked user. I've tried to separate their onClick events, without success.

Here is my frontend code:

import React, { useEffect, useState } from "react"
import { Collapse, CardBody, Card } from 'reactstrap'

export default function Users() {

  const [isOpen, setIsOpen] = useState(false);
      const toggle = (e) => {
          setIsOpen(!isOpen)
      }
 return (
        <ul>
            {users.map(user => (
                <li>
                    <div className="user-space">
                        <div className="closed-user">
                            <img onClick={toggle} src={user.avatar_url} alt={user.login} id={user.login} />
                            <h3 onClick={toggle} className="nickName" id={user.login}>{user.login}</h3>
                        </div>
                        <Collapse isOpen={isOpen}>
                            <Card className="accordion">
                                <CardBody className="accordion-text">
                                    <label>User Name: {user.name}</label>
                                    <label>User Bio: {user.bio}</label>
                                    <label>User Location: {user.location}</label>
                                    <label>User Blog: {user.blog} </label>
                                    <label>Number of followers: {user.followers}</label>
                                    <label>Number of public repositories: {user.public_repos}</label>
                                </CardBody>
                            </Card>
                        </Collapse>
                    </div>
                </li>
            ))}
        </ul>
    )
}

Answer 1

You can apply your isOpen if you expand all user cards. If you want expand specified user card. You should have state for which user is expanding:

Here just my example. You can use use.id instead of state index.

function Users() {
    const [index, setIndex] = useState(false);
    const toggle = (idx) => {
        setIndex(index === idx ? null : idx);
    }
    return (
        <ul>
            {users.map((user, idx) => (
                <li id={idx}>
                    <div className="user-space">
                        <div className="closed-user">
                            <img onClick={() => toggle(idx)} src={user.avatar_url} alt={user.login} id={user.login} />
                            <h3 onClick={() => toggle(idx)} className="nickName" id={user.login}>{user.login}</h3>
                        </div>
                        <Collapse isOpen={idx === index}>
                            <Card className="accordion">
                                <CardBody className="accordion-text">
                                    <label>User Name: {user.name}</label>
                                    <label>User Bio: {user.bio}</label>
                                    <label>User Location: {user.location}</label>
                                    <label>User Blog: {user.blog} </label>
                                    <label>Number of followers: {user.followers}</label>
                                    <label>Number of public repositories: {user.public_repos}</label>
                                </CardBody>
                            </Card>
                        </Collapse>
                    </div>
                </li>
            ))}
        </ul>
    )
}