Как визуализировать один из нескольких одинаковых компонентов реакции?

Question

Я не знаю, стал ли мой мозг сегодня слишком мягким или как. Я пытаюсь научиться реагировать, и теперь у меня есть список сообщений, отображаемых из массива. Внутри каждого сообщения у меня есть кнопка для отображения компонента «отправить сообщение» для ответа на сообщение. Моя проблема в том, что когда я нажимаю кнопку «ответить», все элементы сообщения в списке отображают компонент «отправить сообщение». Как связать его только с одним сообщением, в котором я нажал ответ? Посмотрите мой код, и вы поймете мой вопрос:

render() {
let messages = this.state.messages.map((item, key) =>
  <div>
    <ul key={item.id} className="messageList">
      <li><h3 className="messageTitle">{item.title}</h3></li>
      <li>{item.message}</li>
      <li className="messageSignature">from: {item.from}</li>
    </ul>
    {this.state.showSendMessage ? <SendMessage recipient={item.from} title={item.title}></SendMessage> : null}
    <button onClick={this.toggleShowSendMsg.bind(this)}>Answer</button>
  </div>
);

Answer 1

Это потому, что ваша переменная состояния «showSendMessage» не уникальна для какого-либо конкретного сообщения и, следовательно, становится истинной для всех элементов сообщений.

Добавьте еще одну переменную состояния в качестве «ключа».

render() {
let messages = this.state.messages.map((item, key) =>
  <div>
    <ul key={item.id} className="messageList">
      <li><h3 className="messageTitle">{item.title}</h3></li>
      <li>{item.message}</li>
      <li className="messageSignature">from: {item.from}</li>
    </ul>
    {this.state.showSendMessage && this.state.key == key ? <SendMessage recipient={item.from} title={item.title}></SendMessage> : null}
    <button onClick={this.toggleShowSendMsg.bind(key)}>Answer</button>
  </div>
);

и измените состояние ключа в вашем методе toggleShowSendMsg, как вы это делаете для showSendMessage.