I'm trying to make each logo from the Arr professions display on click certain information from each client. the furthest I have gone is to make each logo display its own logo. IDK if I'm not acceding the properties correctly but I haven't been able to render the information cards

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  src={imgrep(1)} alt="altofem" />, <img  src={imgrep(2)} alt="vimac" />,
    <img  src={imgrep(3)} alt="peopleparnerts" />, <img  src={imgrep(4)} alt="uplanner" />,
    <img  src={imgrep(5)} alt="vmc" />, <img  src={imgrep(6)} alt="fynsa" />,
    <img  src={imgrep(7)} alt="bolsa" />, <img  src={imgrep(8)} alt="allproperty" />,
    <img  src={imgrep(9)} alt="honorato" />, <img  src={imgrep(10)} alt="trabajando" />,
    <img  src={imgrep(11)} alt="ecosale" />, <img  src={imgrep(12)} alt="unitti" />,
    <img  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;

thanks in advance!

CodePudding user response：

Merge your datasets together like this:

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  src={imgrep(1)} alt="altofem" />
    },
    {
      key: "card",
      percentage: "2",
      branch: "",
      industry: null,
      resume: null,
      logo: <img  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;

Also i used the spread operator to simplify the code a bit.