我想点击一个按钮并在 React 中显示一个特定的组件

Question

im new to React, so i trying to make a pokemon web app, basically i have a list of data (Data.js) that imported it in another file (PokemonList.js), i mapped that list and rendered all the names in button form, then i want to know how i make every button display that pokemon info??

Data.js:

export const Data =[
    {
        id: "1",
        name: "arbok",
        imageUrl: '../pokemon_images/arbok.png',
        desc: "This is Pokemon arbok",
        Height : "200 cm",
        Weight: "100 kg",
        Stat : {
                hp : "80",
                attack : "82",
                defense : "83",
                special_attack : "100",
                special_defense : "100",
                speed : "80",
               },
    },

    {
        id: "2",
        name: "arcanine",
        imageUrl: "",
        desc: "This is Pokemon arcanine",
        Height : "210 cm",
        Weight: "110 kg",
        Stat : {
                hp : "81",
                attack : "83",
                defense : "84",
                special_attack : "110",
                special_defense : "110",
                speed : "81",
               },
    },

PokeList.js

import { Data } from "./Data";
import "./PokeList.css"
import { useState } from "react";




function PokeList() {
    const [pokeInfo , setPokeInfo] = useState({
        name: "",
        desc: ""
      })
   
    const handleClick=() => {
        setPokeInfo({  
        })
    }


    return (
        <div className="app-container">
          <div className="pokemon-container">
            <div className="all-container">
                
               {Data.map((el)=> {
                return (
                    <>
                        <button onClick={handleClick(el)}> {el.name} </button> 
                     
                    </>
                )
               }               
                )}
                

            </div>
           </div>
        </div>
        
    )
}

export default PokeList;

As you guys can see the code is incomplete and i really have no idea what to do

Answer 1

You'll simply need to do these changes

Change handleClick function to this

const handleClick=(el) => {
    setPokeInfo({
      name: el.name,
      desc: el.desc
    })
}

and return function to this

return (
        <>
          <button onClick={handleClick(el)}> {el.name} {el.desc}</button> 
        </>
)

This would not 100% map as the answer to your question. But if you share a working JSFiddle with your code - we'll be able to help you out more