title: How to modify only one element in a react .map function?
body: <p>I'm a little new to react and was a little lost with what to do here. I'm loading data from firebase and rendering the props of that object using a .map function to list all the 'comments' on a page, which works fine. I also want to call a component that would allow the user to reply an individual comment (i.e. one specific element in the map), but as expected by this code, when the reply button is clicked it displays the called component under every element of the map, which isn't desirable. Is there anyway I could call the component for just one element of the map in this case? </p>
  
  <pre><code>changeIsReply() {
    this.setState(
      {isReply: !this.state.isReply,}
    );
  }    
  
    render() {
  
    return (
      &lt;div&gt;
      &lt;ul className="list-group"&gt;
      {Object.values(this.props.commentInfo).map((data) =&gt;
        data.map((secondData, i) =&gt;
          &lt;div className="commentHolder" key={i}&gt;
              &lt;p&gt;{secondData.text}&lt;/p&gt;
              &lt;p&gt;{secondData.category}&lt;/p&gt;
              &lt;p&gt;{secondData.organization}&lt;/p&gt;
              &lt;button&gt; UpButton &lt;/button&gt; &lt;br /&gt;
              &lt;button&gt; DownButton &lt;/button&gt;
              &lt;button onClick = {this.changeIsReply} &gt; Reply &lt;/button&gt;
              {this.state.isReply ? &lt;SetComment id={secondData.key} /&gt; : null}
          &lt;/div&gt;
        )
      )}
      &lt;/ul&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>