如何 link 到数组，所以当一个项目被点击时会找到并显示它的对？

Question

我试图让 Arr professionals 的每个徽标在点击每个客户的某些信息时显示。我走得最远的是让每个标志显示自己的标志。 IDK 如果我没有正确访问属性但我无法呈现信息卡

import React, { useState } from "react";
import { imgrep } from "../../Helper/imgrep";
import styled from 'styled-components'
import { CircularProgressbar } from 'react-circular-progressbar';
import 'react-circular-progressbar/dist/styles.css';


const ShowAndHide = () => {
  const professions = [
    <img class="square" src={imgrep(1)} alt="altofem" />, <img class="round" src={imgrep(2)} alt="vimac" />,
    <img class="square" src={imgrep(3)} alt="peopleparnerts" />, <img class="square" src={imgrep(4)} alt="uplanner" />,
    <img class="square" src={imgrep(5)} alt="vmc" />, <img class="square" src={imgrep(6)} alt="fynsa" />,
    <img class="square" src={imgrep(7)} alt="bolsa" />, <img class="square" src={imgrep(8)} alt="allproperty" />,
    <img class="square" src={imgrep(9)} alt="honorato" />, <img class="square" src={imgrep(10)} alt="trabajando" />,
    <img class="square" src={imgrep(11)} alt="ecosale" />, <img class="square" src={imgrep(12)} alt="unitti" />,
    <img class="square" id="uai" src={imgrep(13)} alt="uai" />
  ];
  const informations = [
    {
      key: "card", percentage: "1", branch: "", industry: null, resume: null
    },
    {
      key: "card", percentage: "2", branch: "", industry: null, resume: null
    },
    {
      key: "card", percentage: "3", branch: "", industry: null, resume: null
    },
    {
      key: "card", percentage: "4", branch: "", industry: null, resume: null
    },
    {
      key: "card", percentage: "5", branch: "", industry: null, resume: null
    },
    {
      key: "card", percentage: "6", branch: "", industry: null, resume: null
    },
    {
      key: "card", percentage: "7", branch: "", industry: null, resume: null
    },
    {
      key: "card", percentage: "8", branch: "", industry: null, resume: null
    },
    {
      key: "card", percentage: "9", branch: "", industry: null, resume: null
    },
    {
      key: "card", percentage: "10", branch: "", industry: null, resume: null
    },
    {
      key: "card", percentage: "11", branch: "", industry: null, resume: null
    },
    {
      key: "card", percentage: "12", branch: "", industry: null, resume: null
    },
    {
      key: "card", percentage: "13", branch: "", industry: null, resume: null
    }
  ];


  const [myProfession, setMyProfession] = useState("");
  const [information, setMyInformation] = useState("")

  return (
    <>
      {/* INFORMATION CARDS */}
      <Container>
        <LeftSide>
          <Bottom>
            <Edge>

              {myProfession}
            </Edge>

          </Bottom>
        </LeftSide>
        {/* HOVERING LOGOS */}
        <RightSide >
          <h2> - Nuestros Casos de Exito -</h2>
          <br />
          <Buttons>
            {professions.map(profession => (
              <img
                type="img"
                key={profession}
                src={profession.props.src}
                className={profession.props.class}
                id={profession.props.id}
                onClick={() => setMyProfession(profession)}>
              </img>
            ))}
          </Buttons>
        </RightSide>
      </Container>
    </>
  );
};

export default ShowAndHide;

提前致谢！

Answer 1

像这样合并您的数据集：

import React, { useState } from "react";
import { imgrep } from "../../Helper/imgrep";
import styled from "styled-components";
import { CircularProgressbar } from "react-circular-progressbar";
import "react-circular-progressbar/dist/styles.css";

const ShowAndHide = () => {
  const professions = [
    {
      key: "card",
      percentage: "1",
      branch: "",
      industry: null,
      resume: null,
      logo: <img class="square" src={imgrep(1)} alt="altofem" />
    },
    {
      key: "card",
      percentage: "2",
      branch: "",
      industry: null,
      resume: null,
      logo: <img class="round" src={imgrep(2)} alt="vimac" />
    }
  ];

  const [myProfession, setMyProfession] = useState(undefined);

  return (
    <>
      {/* INFORMATION CARDS */}
      <Container>
        <LeftSide>
          <Bottom>
            {myProfession && (
              <Edge>
                {myProfession.logo}
                {myProfession.branch}
              </Edge>
            )}
          </Bottom>
        </LeftSide>
        {/* HOVERING LOGOS */}
        <RightSide>
          <h2> - Nuestros Casos de Exito -</h2>
          <br />
          <Buttons>
            {professions.map((profession) => (
              <img
                {...profession.logo.props}
                onClick={() => setMyProfession(profession)}
              />
            ))}
          </Buttons>
        </RightSide>
      </Container>
    </>
  );
};

export default ShowAndHide;

我还使用展开运算符稍微简化了代码。

如何 link 到数组，所以当一个项目被点击时会找到并显示它的对？

how to link to arrays, so when one item is click will find and display its pair?

javascript

onclick

reactjs