Using props in an a href to link to an external link - React

Question

I'm trying to be able to use the path props to link an entire card to an external website for a portfolio section.

CardItem Component:

function CardItem(props) {
  return (
    <>
      <li className='cards_item'>
        <a href= {props.path} className="cards_item_link" target="_blank" rel="noopener noreffer">
          <figure className='cards_item_pic-wrap' data-category={props.label}>
            <img
              className='cards_item_img'
              alt='Portfolio Pictures'
              src={props.src}
              path={props.path}
            />
          </figure>
          <div className='cards_item_info'>
            <h5 className='cards_item_text'>{props.text}</h5>
          </div>
        </a>
      </li>
    </>
  );
}

The CardItem I'm passing is:

<CardItem
  src=image/magic.png"
  text="Magic App"
  label="iOs"
  path="https://bigassmessage.com/"
/>

I'm pretty sure it's the href linking but not sure how to fix with the correct styling. I tried backticks and ${props.path} but it just keeps me on the same page without properly taking me to a the correct page.

New to react so don't be too harsh.

Answer 1

so I created a code sandbox from your code and it seems to work fine. The only things I saw was you spelled noreferrer wrong and you should put images in the public folder and then link to them with "/image/magic.png". The / tells react its in the public folder. here is the link for the code sandbox. https://codesandbox.io/s/crimson-water-0hxke?file=/src/App.js