We Keep Coding

External link with react with in a function

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;

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

Images not showing in React?

I'm following along with a Scrimba tutorial on React and I'm doing it on my own machine locally.
I have an image in my images folder within my src folder.
In my components folder I have a component called Card which is shown but why is my image only shown when I import it and not like the other two ways which are commented out?
Might be something stupid but I can't see it. Thanks all.
Just for clarity everything else works bar the image tags commented out.
App.js
function App() {
return (
<div>
<Navbar />
<Hero />
<Card
img="katie-zaferes.png"
rating="5.0"
reviewCount="6"
country="USA"
title="Life Lessons With Katie Zaferes"
price={136}
/>
</div>
);
}
Card.js
import Star from "../images/star.png";
import Athlete from "../images/katie-zaferes.png";
const Card = (props) => {
return (
<div className="card">
<img src={Athlete} alt="card-image" />
{/* <img src="../images/katie-zaferes.png" alt="img" /> */}
{/* <img src={`../images/${props.img}`} alt="card-image" /> */}
<div className="card--stats">
<img src={Star} alt="star" className="card--star" />
<span>{props.rating}</span>
<span className="gray">{props.reviewCount} •</span>
<span className="gray">{props.country}</span>
</div>
<p>{props.title}</p>
<p>
<b>From $ {props.price} </b> / person
</p>
</div>
);
};
export default Card;

I figured out it was an image path issue. I placed my 'images' folder in 'public'. I could then remove all imports and access them anywhere through '/images/example.png'.
Used in a component as shown below:
const Card = (props) => {
return (
<div className="card">
<img src={`/images/${props.img}`} alt="card" />
<div className="card--stats">
<img src="/images/star.png" alt="star" className="card--star" />
<span>{props.rating}</span>
<span className="gray">{props.reviewCount} • </span>
<span className="gray">{props.country}</span>
</div>
<p>{props.title}</p>
<p>
<b>From $ {props.price} </b> / person
</p>
</div>
);
};
export default Card;

If you cant put the 'images' folder in 'public' because create-react-app doesn't let you, put your path as a string literal inside a required function, it worked for me
const Card = (props) => {
return (
<div className="card">
<img src={require(`../images/${props.img}`)} alt="card" />
<div className="card--stats">
<img src="/images/star.png" alt="star" className="card--star" />
<span>{props.rating}</span>
<span className="gray">{props.reviewCount} • </span>
<span className="gray">{props.country}</span>
</div>
<p>{props.title}</p>
<p>
<b>From $ {props.price} </b> / person
</p>
</div>
);
};
export default Card;
This path works assuming you have your 'image' folder as a sibling to you 'component' folder

In the case of the image you are trying to show on your App.js, you are giving your Card component a wrong path to find your image, your app needs to know where to find your "katie-zaferes.png" image, so the right way should be:
<Card
img='../images/katie-zaferes.png'
...
/>
(I'm assuming that your App.js and your Card.js files are on the same folder, in case they're not, you have to modify the path to match your /images/katie-zaferes.png)
Note: By the way, for your next questions here in StackOverflow, try to write your code directly on your post, using the Javascript/HTML/CSS button, never use images because it makes more work for people to answer your question/

Gatsby - Nestled Component Not Rendered

Sorry if there's a really simple solution, but building websites isn't my area of expertise.
I'm currently trying to create a Gatsby website where I have a Component nestled inside another Component but it shows a completely blank screen when I try to show the nestled Component. Following the answer from this question, I implemented a Layout Component that serves as a template for every site. In the future, I plan to tidy up the navigation bar and implement that into the Layout Component, but that's an issue for another time.
I'm currently trying to put in a Tile Component into my Layout that is also encapsulated inside my IndexPage, but my screen just shows nothing when I try to run it. I've tried to shorten the code so that it includes the minimum amount required.
I've taken a look at the Gatsby documentation and it appears that under the "Non-page components" section that I should use GraphQL, which I'm not sure how it works.
I suspect that the reason why it isn't working is that the Tile Component has to take in an imgLocation, altText, and caption properties, and somewhere along the way the code isn't working as intended.
Code:
index.js:
import * as React from "react"
import Layout from './Layout.js';
import Tile from './Tile.js';
// markup
const IndexPage = () => {
return (
<Layout pageTitle="Home">
<div id="main">
<div className="inner">
<h1>
<b>Portfolio</b>
</h1>
<p>
Here's all of the work that I've been commissioned to do over the past few years.
</p>
<h2>
<b>Christmas</b>
</h2>
<h3>
<b>Portrait</b>
</h3>
<section className="tiles">
<Tile imgLocation="imageFileLocationGoesHere" altText="descriptionOfImage" caption="Image Description" />
<Tile imgLocation="imageFileLocationGoesHere" altText="descriptionOfImage" caption="Image Description" />
</section>
<br />
<h3>
<b>Landscape</b>
</h3>
<section className="tiles">
<Tile imgLocation="imageFileLocationGoesHere" altText="descriptionOfImage" caption="Image Description" />
<Tile imgLocation="imageFileLocationGoesHere" altText="descriptionOfImage" caption="Image Description" />
</section>
</div>
</div>
{/* Footer */}
<footer id="footer">
{/* footer goes here */}
</footer>
</Layout>
)
}
export default IndexPage;
Tile.js (within the same folder as index.js):
import React from "react";
import '../css/main.css';
const Tile = (props) => {
const imgLocation = props.imgLocation;
const altText = props.altText;
const caption = props.caption;
return (
<article>
<span>
<img src={require({imgLocation}).default} alt={altText} onClick={() => {openModal(props)}} />
</span>
<br />
<p>{caption}</p>
</article>
);
}
export default Tile;
Layout.js (within the same folder as in index.js)
import * as React from 'react';
const Layout = ({pageTitle, children}) => {
return (
<main>
<title>{pageTitle}</title>
<meta charSet="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no"
/>
{children}
</main>
)
}
export default Layout;

The problem you are facing here is that your Tile component is inside the /pages folder as you pointed here:
Tile.js (within the same folder as index.js):
So, Gatsby is trying to create a page based on the Tile component, hence, you are trying to render a page inside a page.
Move your component into another folder such as src/components/Tile and the issue should be gone.
Layout component also needs to be outside /pages folder.
Regarding the image, try to import it in the parent component and lift it to the child like:
import * as React from "react"
import Layout from './Layout.js';
import Tile from './Tile.js';
...
<Tile imgLocation={'./path/to/your/image.png'} />
And then:
<img src={imgLocation} alt={altText} onClick={() => {openModal(props)}} />
Or even drilling the image directly:
import Img from './path/to/your/image.png'
...
<Tile img={Img} />
Then:
const Tile = ({img:Img, altText, caption}) => {
return (
<article>
<span>
<Img />
</span>
<br />
<p>{caption}</p>
</article>
);
}
export default Tile;
Reassigning the img props as React component should also do the trick

React.JS Context API Problem (Rendering Problem)

I'm currently trying to implement a e-commerce project. My question is about Context API and Reducer.
Cannot able to render price and other details of the product. in Cart Component
Context.Js ;
Here is my Context.js
Reducer.JsHere is the Reducer.js
And My Product Component Code is ;
import './Product.css'
import AddBoxIcon from '#material-ui/icons/AddBox';
import { Context } from "./Context"
import React, {useContext} from "react"
function Product({title,price,image,id}) {
const {addtoBasket} = useContext(Context)
/*
function alertUser() {
alert(`${title} added to your card`)
}
function addBasket(){
console.log(title,price)
}
function firedFunctions(){
alertUser()
addBasket()
}
*/
return (
<div className="product">
<div className="product__info">
<img src={image} alt=""></img>
<p className="title">{title}</p>
<div className ="price__add" >
<h4>Price : {price} $</h4>
<div onClick={() => addtoBasket(title, price, image,id)}>
<AddBoxIcon className="btn" />
</div>
</div>
</div>
</div>
)
}
export default Product
And My Cart Component Code is ;
import React, {useContext} from 'react'
import './Cart.css'
import {Context} from "./Context"
import Product from "./Product"
function Cart() {
const {basket} = useContext(Context)
console.log(basket) // Expected: Empty Array
return (
<div className="cart">
<div className="cart__left">
<h2>Your Products</h2>
<div>
{basket.map((product) =>(
<h4>{product}</h4>
{/*why product give me just a title of product*/}
))}
</div>
</div>
<div className="cart__right">
<h2>Total</h2>
</div>
</div>
)
}
export default Cart
And this is the output when i click the button v.1(console) ;
I want to see Price and image either.

You are passing three parameters to addToBasket function, however it is receiving just one object.
Probably what you needs is:
<div onClick={() => addtoBasket({title, price, image, id)}>
I've just replicate it in codesandbox, this is the right answer, take a look:
https://codesandbox.io/s/awesome-violet-fr7np?file=/src/index.js

React inline background image

I am trying to access the dynamically image from the public directory and using inline style to pass in the props in the Card.js and call it in CardComponent.js. I am very new to react. I don't know what I am doing wrong here. Can you help me with this? Thanks!
Here is the card I am trying to render:
Here is the directory of image I am trying to access : public/assets/img/talent.jpg
Card.js Code:
import React from "react";
import "../styles/Card.css";
function Card(props) {
return (
<div>
<div
className="img-item"
style={{
backgroundImage: `url(require("/assets/img/"${props.image}))`,
}}
>
<div className="text-center centered">
<h3 className="reset-mp text-left mb-2">{props.cardTitle}</h3>
<p className="reset-mp">{props.cardDescription}</p>
</div>
</div>
</div>
);
}
export default Card;
CardComponent.js code:
import React from "react";
import Card from "./Card";
import "../styles/CardComponent.css";
function CardComponent() {
return (
<div className="cards">
<Card
cardTitle="A Talent"
cardDescription="Looking for a job"
image="talent.jpg"
/>
</div>
);
}
export default CardComponent;

Everything inside the public folder is a static file, it will be copied exactly as it is during build in root.
Here a better explanation
So, in your case, you should be able to view you image on:
http://127.0.0.1:3000/assets/img/talent.jpg
So, you can just use:
<div style={{ backgroundImage: `url(/assets/img/${props.image})` }}>

try to change this line /assets/img/ to this ./assets/img/