Реакция сопоставления уникальных данных с уникальными div - PullRequest
Новая
       22

Реакция сопоставления уникальных данных с уникальными div

0 голосов
/ 26 июня 2019

Здравствуйте, у меня есть объект Json, который я использую .map для перебора данных и передачи информации по мере необходимости в качестве реквизита. Проблема в том, что у меня есть модал от Reactionstrap, который я использую для отображения опоры после клика. Вместо этого, после нажатия на мой мод, он отображает все повторяющиеся данные, когда мне нужны только все уважаемые данные, которые я передал в качестве реквизита. 

<article className={props.className}>
  <div className="title"><span>{props.titleA}</span></div>
    <div className="content-overlay"></div>
      <img className="content-image gridImg" src={props.storyA} alt="News-Story-Left" />
        <TimeAgo className="timeStamp" datetime={props.time} />
          <div>
            <div className="content-details fadeIn-bottom fadeIn-right">
              <button className="btn btn-primary" onClick={props.click}>Read Full Story</button>
                <Modal 
                  show={props.A} 
                  onHide={props.B} 
                  dialogClassName="modal-90w"aria-labelledby="example-custom-modal-styling-title">
                    <Modal.Header closeButton>
                    <Modal.Title id="example-custom-modal-styling-title">{props.header}</Modal.Title>
                    </Modal.Header>
                  <Modal.Body><p>{props.snippet}</p></Modal.Body>
                </Modal>
              </div>
          </div>
    </article>
  </div>

Это компонент, который я использую для отображения нужной мне информации. props.header и props.snippet отображают все повторяющиеся данные внутри независимо от того, какой элемент я нажимаю в браузере. 

<div className="grid-container">
  {topHeadlines.slice(0,13).map((item1, index) =>
      <Grid key={index}
      className={index}
      titleA={item1.title}
      storyA={item1.urlToImage}
      time={item1.publishedAt}
      click={this.handleShow}
      A={this.state.show}
      B={this.handleHide}
      header={item1.description}
      snippet={item1.content}
    />)
  }
</div>

Итерация данных

...