ReactJS : How to get index array each card from onClick

Question

I want to open a popup after click on each card and show information of that card on popup but I can not get key to know index to choose information to show

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>
      );
    });

I have to define index array to choose the right object to show on popup

            <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}

yes I can push onClick (onClick={() => this.openModal()} ) in Mediacard but nothing happen — Adiruj
– Adiruj, Commented Aug 4, 2020 at 3:37
Why not storing that i on onClick event? You know, we get the index of object in map. — Ryuko
– Ryuko, Commented Aug 4, 2020 at 4:00

user14045430 · Accepted Answer · 2020-08-04 03:58:26Z

you don't need know the index, you can save all the image object in your state.

add in your MediaCard a onClick event where you send the item to your state.

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>
  );
}

Collectives™ on Stack Overflow

ReactJS : How to get index array each card from onClick

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related