title: React Bootstrap make only one collapse open up when being rendered with a map function / display relevant information in each collapse
body: <p>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. </p>
  
  <p>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?</p>
  
  <p>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.</p>
  
  <p>//Project Component</p>
  
  <pre><code> 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) =&gt;
          &lt;div key={i} className='container'&gt;
            &lt;h4&gt;{members.username}&lt;/h4&gt;
            &lt;Button bsStyle="success" data-memberID={members._id} onClick={this.openCollapse}&gt;View Tasks&lt;/Button&gt;
            &lt;Collapse in={this.state.open}&gt;
              &lt;div&gt;
                &lt;Well&gt;
                { this.props.userTasks 
  
                  ?
  
                  this.props.userTasks.map((task, i) =&gt; 
                    &lt;p key={i}&gt;{task.task.toString()}&lt;/p&gt;
                  )
  
                  :
  
                  nothing
                }
                &lt;/Well&gt;
              &lt;/div&gt;
            &lt;/Collapse&gt;
  </code></pre>
  
  <p>//populateTasks action creator</p>
  
  <pre><code>export function populateTasks(projectID, userID){
      return function(dispatch){
          axios.get('/populate-tasks/' + projectID + '/' + userID).then((res) =&gt; {
              console.log("RESPONSE IN POPULATE TASKS ACTIONS", res)
              dispatch({ type: "SET_USER_TASKS", payload: res.data.task })
          })
      }
  }
  </code></pre>