which is the correct way to acces the props? [closed]

I think I’m not accessing the property src correctly, this can be found in all the objects in a line like this one

logo: <img className=”Mediumsquare” src={imgrep(1)} alt=”altofem”

whenever I try to render them accessing the src, I get the error × typeerror cannot read property of undefined (reading ‘props’)

I have been stuck for a week since this error comes and go :(, thank you in advance!

//IMPORTS
import React, { useState } from "react";
import { imgrep } from "../../Helper/imgrep";
import styled from "styled-components";
import "react-circular-progressbar/dist/styles.css";
import Cards from "./Cards";
import { FaRegEye, VscGraphLine, BsFileEarmarkText } from 'react-icons/all';
import { memerep } from "../../Helper/memes";
import RocketLaunchOutlinedIcon from '@mui/icons-material/RocketLaunchOutlined';
import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
import 'react-circular-progressbar/dist/styles.css';


const ShowAndHide = () => {
//ARRAY
  const professions = [
     {   
    circular: <CircularProgressbar value= "99" text={`99%`} 
    styles={buildStyles({
     // Whether to use rounded or flat corners on the ends - can use 'butt' or 'round'
     strokeLinecap: 'butt',
     // Text size
     textSize: '16px',
     // How long animation takes to go from one nother, in seconds
     pathTransitionDuration: 1.5,
     // Colors
     pathColor: `rgba(58, 123, 213, ${99 / 100})`,
     textColor: '#102647',
     trailColor: '#e0e0eb',
     backgroundColor: '#3e98c7',
   })}
   /> ,
      key: "card11",
      project:"PROYECTO4 Mat",
      icon: "",
      specialty: "CV",
      industry: "Reciclaje",
      summary: "Estimación de huella de carbono (gramo CO2 eq) con 
                detección de materiales de reciclaje.",
      logo: <img  className="Mediumround" src={imgrep(11)} alt="ecosale" />,
    },


    { 
    circular: <CircularProgressbar value= "99" text={`99%`} 
    styles={buildStyles({
     // Whether to use rounded or flat corners on the ends - can use 
 'butt' or 'round'
     strokeLinecap: 'butt',
     // Text size
     textSize: '16px',
     // How long animation takes to go from one nother, in seconds
     pathTransitionDuration: 1.5,
     // Colors
     pathColor: `rgba(58, 123, 213, ${99 / 100})`,
     textColor: '#102647',
     trailColor: '#e0e0eb',
     backgroundColor: '#3e98c7',
   })}
   /> ,
      key: "card12",
      project:"PROYECTO",
      icon: "",
      specialty: "unn",
      industry: "it",
      summary: "ti",
      logo: <img  className="Mediumsquare" src={imgrep(12)} alt="unitti" />,
    },
    {  
    circular: <CircularProgressbar value= "99" text={`99%`} 
    styles={buildStyles({
     // Whether to use rounded or flat corners on the ends - can use 'butt' or 'round'
     strokeLinecap: 'butt',
     // Text size
     textSize: '16px',
     // How long animation takes to go from one nother, in seconds
     pathTransitionDuration: 1.5,
     // Colors
     pathColor: `rgba(58, 123, 213, ${99 / 100})`,
     textColor: '#102647',
     trailColor: '#e0e0eb',
     backgroundColor: '#3e98c7',
   })}
   /> ,
      key: "card13",
      project:"PROYECTO",
      icon: "",
      specialty: "u",
      industry: "a",
      summary: "i",
      logo: <img  id="uai" className="Bigsquare" src={imgrep(13)} alt="uai" />,
    },
  ];

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

   return (
    <>
      {/* INFORMATION CARDS */}
      <Container>
        <LeftSide>
          <Bottom>
            {professions &&(
          <Cards 
          circular={myProfession.circular}
          project={myProfession.project}
          icon={myProfession.icon}
          percentage={myProfession.percentage} 
          specialty= {myProfession.specialty}
          industry={myProfession.industry}
          summary={myProfession.summary}
          rocket={myProfession.rocket}
          **id={myProfession.logo.props.id}
          src={myProfession.logo.props.src}
          className={myProfession.logo.props.className}**
           />       
            )}
            
            {professions.map((profession) => ( 
              <info
              circular={profession.circular}
              project={profession.project}
              icon={profession.icon}
              percentage={profession.percentage}
              specialty={profession.specialty}
              industry={profession.industry}
              summary={profession.summary}
              **id={profession.logo.props.id}
              src={profession.logo.props.src}
              className={profession.logo.props.className}**
              onMouseEnter={() => setMyProfession(profession.logo.props.alt)}/>
            ))}
          </Bottom>
        </LeftSide>
        {/* HOVERING LOGOS */}
        <RightSide>
          <h2> - Nuestros Casos de Exito -</h2>
          <br />
          <Buttons>
            {professions.map((profession) => (
              <>

/// here it renders just fine!///
                <img
                  type="img"
                  key={profession}
                  id={profession.logo.props.id}
                  src={profession.logo.props.src}
                  className={profession.logo.props.className}
                  onMouseEnter={() => setMyProfession(profession)}
                ></img>
              </>
            ))}
          </Buttons>
        </RightSide>
      </Container>
    </>
  );
};

export default ShowAndHide;

Answer

Class Component

import React, {Component} from 'react';

class Home1 extends Component {

 constructor(props){
   super(props);
   console.log(props);
 }

 render(){
  return(<div>Hello, {this.props.name}</div>);
 }
}

export default Home1;

Functional Component

import React from 'react';

const Home2 = (props) => {
 
 return(<div>Hello, {props.name}</div>);
}

export default Home2; 

Rest, in your long lengthy code, you might find what goes wrong — I gave you basic-accessibility of props (or how to access them) in both types of components – Class & Functional.