Реагировать - Как открыть только один модальный в массиве

Question

Поэтому я только начал изучать реакцию и для своего первого небольшого проекта я решил создать простой пользовательский интерфейс с использованием Marvel API. У меня есть массив, который отображает все чудо-символы, которые начинаются с определенной буквы, например; пользователь вводит 'h', а затем им показывается каждый символ, который начинается с буквы h. Когда пользователь нажимает на символ, появляется модал и отображает информацию об этом конкретном символе.

Моя проблема в том, что когда пользователь нажимает на картинку, чтобы открыть модал, открываются все модалы для каждого символа в массиве. Я не знаю, как сделать только модал, который выбран для открытия.

    render () {
var characters = _.map(this.state.characters, (character, i) => {
var pic = character.thumbnail.path
var picExt = character.thumbnail.extension
return (
  <div className="styleResults" key={i}>
    <li><h3>{character.name}</h3></li>
    <div>
      <img src={`${pic}/standard_fantastic.${picExt}`} 
alt={`${character.name}`} onClick={() => this.openModal()}/>
      <Modal isOpen={this.state.isModalOpen} onClose={() => 
      this.closeModal()} contentLabel="marvelModal">
          <div>
            <div><h1>{character.name}</h1></div>
            <div><img className="modalIm" src=
 {`${pic}/standard_fantastic.${character.thumbnail.extension}`} alt=
 {`${character.name}`}/></div>
            <div>{character.description}</div>
          </div>
       <p><button onClick={() => this.closeModal()}>Close</button></p>
      </Modal>
    </div>
  </div>
);
});
return (
  <div>
    <div>
      <div>
        <h2>Enter a Character's Name</h2>
        <input ref="charS" type="text"/>
        <button onClick={ (e) => { this.updateCharSearch(); } 
        }>Search</button>
      </div>
      <div className="CharAndComDiv">
        <h2>Enter a Comic's Name</h2>
        <input ref="comicSearch" type="text"/>
        <button onClick={ (e) => { this.updateComicSearch(); } 
         }>Search</button>
      </div>
    </div>
    <div>
      <div>
        <ul>{characters}</ul>
      </div>
      <div>
        <ul>{comics}</ul>
      </div>
    </div>
  </div>
);
}
    openModal() {
    this.setState({ isModalOpen: true })
}

   closeModal() {
   this.setState({ isModalOpen: false })
  }
};

Answer 1

Не создавайте модальные для каждого персонажа - создайте один модальный, который может визуализировать любой выбранный персонаж.

Например, магазин modalOpenIndex который будет хранить индекс текущего открытого символа или -1 для закрытой модели. Затем переместите <Modal быть последним элементом рендера (не в функции карты).

<Modal 
    isOpen={this.state.modalOpenIndex >= 0} 
    onClose={() => this.closeModal()} contentLabel="marvelModal">