ReactJS: Как получить индексный массив каждой карточки из onClick

Question

Я хочу открывать всплывающее окно после щелчка по каждой карточке и показывать информацию об этой карточке во всплывающем окне, но я не могу получить ключ, чтобы узнать индекс, чтобы выбрать информацию для отображения

const childElements = this.state.images.map(function (item, i) {
     return (
        <div key={item.id} data-key={i}>
          
          <MediaCard
            poster={item.largeImageURL}
            id={item.id}
            views={item.views}
            key={item.id}
            data-key={i}
          />
          
        </div>
      );
    });

Мне нужно определить индекс массив для выбора нужного объекта для отображения во всплывающем окне

            <StackGrid
              onClick={this.openModal}
            >

              {childElements}

            </StackGrid>

            {this.state.visible ? (
              
              <Popup id={this.state.images['I want to know index after click each card to insert heare'].id} handler={this.handler} />
            ) : null}

Answer 1

вам не нужно знать индекс, вы можете сохранить весь объект изображения в своем состоянии.

добавьте в свое MediaCard событие onClick, в котором вы отправляете item в свое состояние.

import React, { useState} from "react";
import "./App.css";



const images = [
      {id: 1, src : "https://d1nhio0ox7pgb.cloudfront.net/_img/i_collection_png/256x256/plain/chess_piece_bishop.png", alt: "image 1"}, 
      {id: 1, src : "https://cdn.iconscout.com/icon/premium/png-256-thumb/bishop-black-games-battle-checkmate-chess-camel-figure-58246.png", alt: "image 2"}
    ]

export default function App() {
  const [image, setImage] = useState({});


  const ChildElements = ({images}) => images.map(function (item, i) {
    return (
       <div key={item.id} data-key={i}>       
         <img
           src={item.src}
           alt={item.alt}         
           key={item.id}
           width='45px'
           data-key={i}
           onClick={() => setImage(item)}
         />       
       </div>
     );
   });


 
  return (
    <div className="App">
      <ChildElements images={images} />

      <h1>Image Selected</h1>
     <img src={image.src} width='90px' alt={image.alt}/>

    </div>
  );
}