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;

Answer 1

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).