How to modify only one element in a react .map function?

Question

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?

changeIsReply() {
  this.setState(
    {isReply: !this.state.isReply,}
  );
}    

  render() {

  return (
    <div>
    <ul className="list-group">
    {Object.values(this.props.commentInfo).map((data) =>
      data.map((secondData, i) =>
        <div className="commentHolder" key={i}>
            <p>{secondData.text}</p>
            <p>{secondData.category}</p>
            <p>{secondData.organization}</p>
            <button> UpButton </button> <br />
            <button> DownButton </button>
            <button onClick = {this.changeIsReply} > Reply </button>
            {this.state.isReply ? <SetComment id={secondData.key} /> : null}
        </div>
      )
    )}
    </ul>
    </div>
  )
}

Answer 1

That's because you are using a single state for all the comments.

<button onClick = {() => this.changeIsReply(secondData.key)} > Reply </button>

{this.state.isReply && this.state.clickedComment == {secondData.key} ? <SetComment id={secondData.key} /> : null}

and change your changeIsReply() to:

changeIsReply(clickedId) {
    this.setState({
        isReply: !this.state.isReply, 
        clickedComment: clickedId
    });
}

See if this works. Don't forget to add the new state to your constructor.