React Bootstrap make only one collapse open up when being rendered with a map function / display relevant information in each collapse

Question

I am trying to display the relevant tasks for a user after clicking on a button called "View Tasks". The problem I am having right now is, when I click this button, all React Bootstrap Collapse Components open up and the tasks being shown are displayed under all users, but it should only be shown for one specific user. I am rendering all these with a map function.

I need to open one Collapse at a time, but since I am rendering with a map, the onClick function is the same for every one created so this triggers all of them to open, how can I do it so that only one opens at a time and opens ones close when another View Tasks button is clicked?

Also how can I do it so that the relevant tasks shows up under the specific user where i clicked "View Tasks" for and not show up under everyone.

//Project Component

 constructor(props) {
    super(props);

    this.state = {}

    this.handleJoin = this.handleJoin.bind(this);
    this.open = this.open.bind(this);
    this.openCollapse = this.openCollapse.bind(this);
  }
  openCollapse(event) {
    this.setState({open: !this.state.open})

    var projectID = this.props.router.params.id;
    var userID = event.target.getAttribute('data-memberID');

    this.props.populateTasks(projectID, userID)
  }

  teamMems = members.map((members, i) =>
        <div key={i} className='container'>
          <h4>{members.username}</h4>
          <Button bsStyle="success" data-memberID={members._id} onClick={this.openCollapse}>View Tasks</Button>
          <Collapse in={this.state.open}>
            <div>
              <Well>
              { this.props.userTasks 

                ?

                this.props.userTasks.map((task, i) => 
                  <p key={i}>{task.task.toString()}</p>
                )

                :

                nothing
              }
              </Well>
            </div>
          </Collapse>

//populateTasks action creator

export function populateTasks(projectID, userID){
    return function(dispatch){
        axios.get('/populate-tasks/' + projectID + '/' + userID).then((res) => {
            console.log("RESPONSE IN POPULATE TASKS ACTIONS", res)
            dispatch({ type: "SET_USER_TASKS", payload: res.data.task })
        })
    }
}

Answer 1

So as what I said, keep a separate component with collapse state for TeamMember whose tasks or toggled with button . Something like this

class TeamMember extends Component {
  constructor(props);
  this.state = {
    open: false //collapse state for this member
  }
  render(){
    <div>
      <YourButton with onClick={someStateChangingMethod} />
      <YourMemberContent />
    </div>
  }
}

And in your main component create the above components over teamMems loop.

teamMems = members.map((member, i) => (
  <TeamMember key={i} {...this.props} member={member}>
)

Hope this helps.