External link with react with in a function

Question

So I'm trying to use the href at the bottom to link to Twitter? When putting an atag I get an error. is there another function I can use?

Ps. what I'm trying to do is on my home page have a picture that when the user clicks on it redirects them to Twitter.

I looked at other questions but it is not the same as mine. mine is trying to put a href inside a function.

Just added m carditem.JS components as well. Thank you !

import React from "react";
import "./Cards.css";
import CardItem from "./CardItem";
import { Link } from "react-router-dom";

function Cards() {
  return (
    <div className="cards">
      <h1>Lost Fantom Saga Projects</h1>
      <div className="cards__container">
        <div className="cards__wrapper">
          <ul className="cards__items">
            <CardItem
              src="images/img-9.jpg"
              text="Lost Fantom Warrios"
              label="Warriors"
              path="/services"
            />
            <CardItem
              src="images/img-2.jpg"
              text="Lost Fantom Disciples"
              label="Disciples"
              path="/services"
            />
          </ul>
          <ul className="cards__items">
            <CardItem
              src="images/img-3.jpg"
              text="Fantom Degens"
              label="Degens"
              path="/services"
            />
            <CardItem
              src="images/img-4.jpg"
              text="Coming Soon"
              label="Coming Soon"
              path="/products"
            />
            <CardItem
              src="images/img-4.jpg"
              text="Coming Soon"
              label="Coming Soon"
              href="https://twitter.com/LostFantomSaga/"
              target="_blank"
            />
          </ul>
        </div>
      </div>
    </div>
  );
}

export default Cards;

import React from 'react';
import { Link } from 'react-router-dom';

function CardItem(props) {
  return (
    <>
      <li className='cards__item'>
        <Link className='cards__item__link' to={props.path}>
          <figure className='cards__item__pic-wrap' data-category={props.label}>
            <img
              className='cards__item__img'
              alt='Travel Image'
              src={props.src}
            />
          </figure>
          <div className='cards__item__info'>
            <h5 className='cards__item__text'>{props.text}</h5>
          </div>
        </Link>
      </li>
    </>
  );
}

export default CardItem;

Why don't you use "React Router DOM" ? like this : https://stackoverflow.com/questions/30202755/react-router-open-link-in-new-tab — Ali M. Sadeghi, Apr 25 '22 at 03:44
where would i implement that into ? cards.js or carditem.js? — ivan jimenez, Apr 25 '22 at 04:08

score 0 · Answer 1 · answered Apr 25 '22 at 04:11

One simple approach that might suit your needs would be to use a <a> tag instead of the Link component.

Here's a quick and dirty CodeSandbox for how you could go about this, based on the code snippets you provided - https://codesandbox.io/s/lingering-sky-d4lz21?file=/src/CardItem.tsx. It demonstrates the ability to slightly alter the final render by using either props.path to use a Link component, or props.href to use a <a> tag (along with props.target for the target attribute).

You Sir Are A Life Saver!!! – ivan jimenez Apr 25 '22 at 04:36 — ivan jimenez, Apr 25 '22 at 04:36

External link with react with in a function

1 Answers1