We Keep Coding

React won't load local images using props

Card.js
import React from "react"
import '../index.css';
import Star from "../image/Star 1.png";
export default function Card(props) {
return (
<div className="card">
<img src={`../image/${props.img}`} className="card--image" alt="swimer" />
<div className="card--stats">
<img src={require(`../image/Star 1.png`)} className="card--star" alt="star" />
<span>{props.rating}</span>
<span className="gray">(6) • </span>
<span className="gray">USA</span>
</div>
<p>Life Lessons with Katie Zaferes</p>
<p><span className="bold">From $136</span> / person</p>
</div>
)
}
App.js
import React from "react"
import Navbar from "./Airbnb/Navbar"
import Hero from "./Airbnb/Hero"
import Card from "./Airbnb/Card"
export default function App() {
return (
<div>
<Navbar />
<Hero/>
<Card
img="swimer.png"
rating="5.0"
reviewCount={6}
country="USA"
title="Life Lessons with Katie Zaferes"
price={136}
/>
</div>
)
}
the image was not showing to begin so i used props it worked for me but then it come to
<img src={../image/${props.img}} className="card--image" alt="swimer" />
I tried "requires" I tried "default" but it's not working. what should i do display the image.

you can do this
import imageAddress from '../image/swimer.png';
<Card
img={imageAddress}
rating="5.0"
reviewCount={6}
country="USA"
title="Life Lessons with Katie Zaferes"
price={136}
/>
it should work

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/

How we pass the id of selected product to the other component in react

In my website, MainWidget.js contain all categories link like- CLOTHES ,ELECTRONICS,Home Accessories etc....Now if I click on Clothes ,this will render to the Product.js page where all clothing section in mention ,I'm stuck at this page ,If I select particular item then this should be render on then ProductScreen.js where the details of that particular product is mentioned...So How I pass the Id of the selected product from Product.js component to the ProductScreen Component
App.js
import React from 'react';
import './App.css';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Header from './components/Header';
import Main_WidgetPage from './components/Main_WidgetPage';
import Product from './components/Product';
import ProductScreen from './components/ProductScreen';
import data from './data';
function App() {
return (
<Router>
<div className="grid-container">
<Switch>
<Route path="/productScreen/:id">
<Header />
<ProductScreen/>
</Route>
<Route path="/product">
<Header />
<Product />
</Route>
<Route path="/">
<Header />
<Main_WidgetPage />
</Route>
</Switch>
</div>
</Router>
);
}
export default App;
MainWidget.js
<div className="card_container1">
<div className="card">
<Link to="/product">
<h1> Link to PRODUCT.JS Clothing Section
</h1>
</Link>
</div>
<div className="card">
<Link to="/product">
<h1> Link to PRODUCT.JS
</h1>
</Link>
</div>
<div className="card">
<Link to="/product">
<h1> Link to PRODUCT.JS
</h1>
</Link>
</div>
</div>
Product.js
function Product() {
return (
<div className="product">
<div className="row center">
{/* fetching data from data.js using map func */}
{/* data - file name; products -array name */}
<Link to="/productScreen?id='**I want to pass the id of the selcted product** '">
{
data.products.map(product=>(
<div key={product._id} className="card card-deck">
<div className="product_image">
<a href={`/product/${product._id}`}>
<img className="image" src={product.image} alt={product.name} style={{textAlign:"center"}}/>
</a>
</div>
<div className="product_detail">
<a href={`/product/${product._id}`}>
<h4>{product.brand}</h4>
<p>{product.description}</p>
</a>
<div className="product_rating_Page">
<Rating rating={product.rating} numReviews={product.numReviews}/>
ProductScreen.js
function ProductScreen({props}) {
const product = data.products.find(x => x._id === props.match.params.id);
console.log(product);
if(!product){
return <div>Product Not Found</div>
}
// const product=data.products;
return (
<div className="productScreen">
<div className="row">
<div className="col-2">
<img className="large" src={product.image} alt={product.name}/>
</div>
<div className="col-1">
<ul>
<li>
<h1>{product.brand}</h1>
</li>
<li>
<Rating rating={product.rating} numReviews={product.numReviews}/>
</li>
<li>
<CurrencyFormat
renderText={(value) => (
<h5>{value}</h5>
)}
decimalScale={2}
value={product.price}
displayType={"text"}
thousandSeparator={true}
prefix={"$"}
/>
</li>
<li>
<p>{product.description}</p>
</li>
</ul>
</div>

in your routing, you can pass routeParams with the URL like below.
<Route
path="/product/:id"
component={ProductPage}
exact={true}
/>
put your <Link> inside the data.products.map(product=>() like below and pass the product id to the link.
<Link to=`/productScreen/${product_id}`>
in your ProductScreen.js file, you can access the product id with the below code
// make sure you import the useParam
import { useParams } from "react-router";
// use this to access the id from the route params
const params = useParams<RouteParam>();
console.log(params.id);

On click on a <link> routing not working but on reloading URL it works

Need help!
In my application, I've created a "Link" for navigating from the current page to another page and for that I've used routes and it is kind of working as on the click on the link URL changes but the page is not navigated to the URL specified on the URL bar which is directly accessible when you reload the URL after click.
I'm new to this technology, please let me know if I've gone wrong somewhere.
App.js
import React from 'react';
import InstaGallery from './components/instaGallery.js';
import Home from './components/home'
import {BrowserRouter as Router,Route,Switch} from 'react-router-dom'
function App() {
return (
<Router>
<Switch>
<Route exact path='/' component={Home} />
<Route path='/instagallery' component={ InstaGallery } />
</Switch>
</Router>
);
}
export default App;
Link.js
<Link to={'/instaGallery'} replace className="menu-anchor"><span><img className="nav-menu-icon" src="https://i.ibb.co/NN8QH7s/Group-1530.png" alt="" />
{/* <img className="nav-menu-icon-hover" src="https://i.ibb.co/k8kVNk9/Group-2958.png" alt="" /> */}
HOME</span></Link>
instaGallery.js
//Page to be navigated on click of link
import React from "react";
import $ from "jquery";
class InstaGallery extends React.Component {
// another function starts
render() {
return (
<div className="container-fluid no-padd">
<div className="gallery-wraper">
<div className="main-grid">
<p className="p-subtext">Tag us to be featured</p>
<p className="p">#yallaparty</p>
<div className="item item1 open" />
<div className="item item2" />
<div className="item item3" />
<div className="item item4" />
<div className="item item5" />
</div>
<div className="description-wraper">
<div className="pen-description">
<div className="date">06/03</div>
<div className="star-ratings-review">
<div className="star-ratings-gallery"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
<p className="review-text">
Thank you so much! You did an amazing job on
such short notice. Yalla Party was a major help
and I’ll definitely refer you. Good luck for the
future!
</p>
<p className="text-person">JUMA AL MAJID</p>
</div>
</div>
<div className="gallery-btn"><span>
<button className="gallery-prev-btn">
<img src="https://i.ibb.co/hDfxkr6/Group-629.png" alt="" className="gallery-btn-arrow" />
</button></span><span><button className="gallery-nxt-btn">
<img src="https://i.ibb.co/3hpG9rc/Group-628.png" alt="" className="gallery-btn-arrow" />
</button></span></div>
</div>
</div>
</div>
);
}
}

Try removing exact on with path="/".
Add render method and return something in InstaGallery component.
Question: Why are you importing jQuery in InstaGallery component?

You have to remove {} from Link tag like
<Link to='/instaGallery' replace className="menu-anchor"><span><img className="nav-menu-icon" src="https://i.ibb.co/NN8QH7s/Group-1530.png" alt="" />
{/* <img className="nav-menu-icon-hover" src="https://i.ibb.co/k8kVNk9/Group-2958.png" alt="" /> */}
HOME</span></Link>

Building a small site in React with one module VS in Html/css/js

I'm new to React.. If I load all my content like so in App.js in the React framework (all as one component). I'm guessing I'm not really using React in the proper way. But does this one component for a whole website approach have any advantage/disadvantage over building it in the normal HTML/CSS/JS format? Would this actually be slower as a site ?
import React, { Component } from 'react';
import WebFont from 'webfontloader';
import urban_tribal_stfregular from './fonts/urban_tribal_stfregular.ttf';
import urban_brush_zoneregular from './fonts/urban_brush_zoneregular.ttf';
import urbanpaintsregular from './fonts/urbanpaintsregular.ttf';
import urbantrailsregular from './fonts/urbantrailsregular.ttf';
import urbanposterregular from './fonts/urbanposterregular.ttf';
import urban_rubberregular from './fonts/urban_rubberregular.ttf';
import logo from './img/logo.png';
import leaf from './img/leaf.png';
import hq from './img/hq.png';
import eyeSprinkle from './img/eye-sprinkle.png';
import docturDotHead from './img/doctur-dot-head.png';
import johnnyVenus from './img/johnny-venus.png';
import pyramid from './img/pyramid.png';
import goldElevator from './img/gold-elevator.png';
import demon from './img/demon.png';
import sword from './img/sword.png';
import stage1 from './img/stage-1.png';
import stage1Fire1 from './img/stage-1-fire-1.png';
import stage1Fire2 from './img/stage-1-fire-2.png';
import stage2Fire1 from './img/stage-2-fire-1.png';
import cloud1 from './img/cloud-1.png';
import cloud2 from './img/cloud-2.png';
import stage2 from './img/stage-2.png';
import footerShim from './img/840.png';
import footer from './img/footer.png';
import './App.css';
const styles = {
urban_tribal_stfregular: {
fontFamily: 'urban_tribal_stfregular'
},
urban_brush_zoneregular: {
fontFamily: 'urban_brush_zoneregular'
},
urbanpaintsregular: {
fontFamily: 'urbanpaintsregular'
},
urbantrailsregular: {
fontFamily: 'urbantrailsregular'
},
urbanposterregular: {
fontFamily: 'urbanposterregular'
}
};
// CONFIG OBJECT TO PASS TO HOC
class App extends Component {
render() {
let projectTitle = 'Earthgang'
return (
<div className="App">
<div className="background-enhance">
<header className="App-header">
<div style={{flexDirection:"row"}}>
{/* new wrap for dat perspective ting */}
<div className="wrap">
<div className="bg">
{/* perspective level 1 (back)*/}
<div style={{ position: "absolute", width: "100%" }}>
<div className="plate">
<br />
</div>
<img src={hq} className="hq" alt="HQ" />
<div id="imageEye" className="spriteEye"></div>
<img src={leaf} className="leaf" alt="weed" />
<img src={leaf} className="leaf leaf_right" alt="grass" />
</div>
<div className="bg">
{/* perspective level 2*/}
<div id="imageHeadJohny" className="spriteHeadJohny"></div>
<div id="imageHeadDot" className="spriteHeadDot"></div>
<div className="bg">
{/* perspective level 3*/}
<img alt="" id="myButtn" className="logoTop" src={logo} />
<div className="pyramid-box">
<img src={pyramid} className="pyramid" alt="pyramid" />
<img src={goldElevator} className="gold-elevator" alt="pain profit" />
<img src={eyeSprinkle} className="eye-sprinkle" alt="eye" />
<img src={demon} className="demon" alt="demon" />
<div className="stages stage-1-box">
<img src={stage1}className="stage-1" alt="Stage 1" />
<img src={stage1Fire1} className="stage-1-fire-1" alt="Stage 1 Fire 1" />
<img src={stage1Fire2} className="stage-1-fire-2" alt="Stage 1 Fire 2" />
</div>
<div className="stages stage-2-box">
<img src={stage2} className="stage-2" alt="Stage 2" />
<img src={stage2Fire1} className="stage-2-fire-1" alt="Stage 2 Fire 1" />
</div>
</div>
<div id="imageApe" className="spriteApe"></div>
<div id="imageHyena" className="spriteHyena"></div>
</div>
</div>
</div>
</div>
{/* End of new wrap for dat perspective ting */}
</div>
</header>
<div id="footer1">
</div>
<div id="footer2">
<p>Footer (or other) content here</p>
</div>
<div style={{flexDirection:"row"}}>
<div>
</div>
</div>
</div>
</div>
);
}
}
export default App;

Well , this is entirely just my own opinion which may be wrong .
If you are building with this single component website approach , then there is no need to use react really . You are just loading extra 57 kb or something according to this link React file size since you are not loading extra libraries.
But obviously maintaining this would not be an easy job and you are better off using react features to make you life easier and make the app scalable