We Keep Coding

Props.img not displaying

Here’s my code in App.js
import React from “react”;
import Navbar from “./components/Navbar”
import Hero from “./components/Hero”
import Card from “./components/Card”
export default function App(){
return(
<div>
<Navbar />
<Hero />
<Card
img="./images/katie.png"
rating={5.0}
reviewcount={6}
country="usa"
title="Life lessons from Katie Zaferes"
price={138}
/>
</div>
)
}
and where I’m trying to pass the image into
import React from “react”
import star from “…/images/star.png”
export default function Card(props){
return(
<div className="div1">
<img src={`../images/${props.img}`} className="katie1"/>
<div className="card-stats">
<img src={star} className="card--star" />
<span>{props.rating}</span>
<span className="grey">({props.reviewcount}) </span>
<span className="grey">{props.country}</span>
</div>
<p>{props.title}</p>
<p>From ${props.price} / person</p>
</div>
)
}
Any ideas? I’ve tried moving the images folder to the public folder but react doesn’t seem to like that as I get an error message “images can’t be outside of the src folder”

you should import image and send imported image as props.
import imgSrc from "./images/katie.png";
send image as props:
<div>
<Navbar />
<Hero />
<Card
img={imgSrc}
rating={5.0}
reviewcount={6}
country="usa"
title="Life lessons from Katie Zaferes"
price={138}
/>
</div>

Functional component is not being rendered

I am trying to display the songs but for some reason my songs component is not even being executed. The console.log statement inside the Songs component is also not being logged to console. Also no errors of any sort are detected at all.
Here is my body component from which I am calling the Songs component
import './body.css'
import React from 'react'
import Header from './Header'
import { useStateValue } from './StateProvider';
import FavoriteIcon from '#material-ui/icons/Favorite';
import PlayCircleFilledIcon from '#material-ui/icons/PlayCircleFilled';
import MoreHorizIcon from '#material-ui/icons/MoreHoriz';
import Songs from './Songs.js'
function Body( {spotify}) {
const [{recently_played},dispatch] = useStateValue();
return (
<div className="body">
<Header spotify={spotify} />
<div className="body__info">
<img src={recently_played?.images[0].url} alt=""/>
<div className="body__infotext">
<strong>PLAYLIST</strong>
<h2>On Repeat</h2>
<p>{recently_played?.description}</p>
</div>
</div>
<div className="body__songs">
<div className="body__icons">
<PlayCircleFilledIcon className="body__shuffle"/>
<FavoriteIcon fontSize="large"/>
<MoreHorizIcon />
</div>
{recently_played?.tracks.items.map(item=>{
<Songs track={item.track} />
})}
</div>
</div>
)
}
export default Body
Here is the Songs component
import React from "react";
import './SongRow.css'
function Songs({ track }) {
console.log(track);
return (
<div className="songRow" >
<img className="songRow__album" src={track.album.images[0].url} alt="" />
<div className="songRow__info">
<h1>{track.name}</h1>
<p>
{track.artists.map((artist) => artist.name).join(", ")} -{" "}
{track.album.name}
</p>
</div>
</div>
);
}
export default Songs;

You are not returning anything inside the map
{recently_played?.tracks.items.map(item => {
return <Songs track={item.track} />;
})}
[or] use the shorthand version of arrow function
{recently_played?.tracks.items.map(item => <Songs track={item.track} />)}

React Hook called in function

i am newbi to react js i was trying to learn by doing project , i was building basic ecom ui with items
i was trying to create a basket to add the item into the cart , but i faced that problem
React Hook "useStateValue" is called in function "product" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooksmponent or a custom React Hook function
import React from 'react';
import "./Product.css"
import { useStateValue } from "./StateProvider";
function product({id,title,image,price,rating}) {
const [{basket},dispatch] = useStateValue();
const addToBasket = () => {
dispatch({
type: "ADD_TO_BASKET",
item:{
id:id,
title:title,
image:image,
price:price,
rating:rating
},
})
};
return (
<div className="product">
<div className="product__info" >
<p>{title}</p>
<p className="product__price">
<small>$</small>
<strong> {price} </strong>
</p>
<div className="product__rating">
{Array(rating)
.fill( )
.map((_) => (
<p>-</p>
))}
</div>
</div>
<img src={image} alt=""/>
<button onClick={addToBasket} className="product__button"> Add to basket </button>
</div>
);
}
export default product
................................
import React from 'react';
import "./Product.css"
import { useStateValue } from "./StateProvider";
function product({id,title,image,price,rating})
{
const [{basket},dispatch] = useStateValue();
const addToBasket = () => {
dispatch({
type: "ADD_TO_BASKET",
item:{
id:id,
title:title,
image:image,
price:price,
rating:rating
},
})
};
return (
<div className="product">
<div className="product__info" >
<p>{title}</p>
<p className="product__price">
<small>$</small>
<strong> {price} </strong>
</p>
<div className="product__rating">
{Array(rating)
.fill( )
.map((_) => (
<p>-</p>
))}
</div>
</div>
<img src={image} alt=""/>
<button onClick={addToBasket} className="product__button"> Add to basket </button>
</div>
);
}
export default product
.....................................
import React from 'react';
import Product from "./Product";
import "./Home.css";
function Home() {
return (
<div className="home">
<img class="home__image" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOIP.3U6xnN8wOOQ5atG6MO907wHaEK%26pid%3DApi&f=1"/>
<div className="home__row">
<Product
id="300"
title="Argan oil"
price={11.96}
rating={5}
image="https://i.pinimg.com/originals/e6/13/0e/e6130ed7d4820b7eba0a1ba7a631abea.jpg"
alt="" />
<Product
id="300"
title="Argan oil"
price={11.96}
rating={5}
image="https://i.pinimg.com/736x/ef/c4/01/efc4017b4340dfc35a98ca2235189759.jpg"
alt="" />
<Product
id="300"
title="Argan oil"
price={11.96}
rating={5}
image="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.byrdie.com%2Fthmb%2F6a2mRHTbEwSWrTOTG1yT5gFDxFs%3D%2F700x700%2Ffilters%3Ano_upscale()%3Amax_bytes(150000)%3Astrip_icc()%2Fcdn.cliqueinc.com__cache__posts__269825__iherb-natural-beauty-products-269825-1539195561186-product.700x0c-6534d2dd4ba1409b84d89684001853df.jpg&f=1&nofb=1"
alt="" />
<Product
id="300"
title="Argan oil"
price={11.96}
rating={5}
image="https://s3.images-iherb.com/sre/sre01007/r/1.jpg"
alt="" />
<Product
id="300"
title="Argan oil"
price={11.96}
rating={5}
image="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.pinimg.com%2Foriginals%2Fb7%2Fb4%2F72%2Fb7b47228df40d8a2759f30aa778ff31c.jpg&f=1&nofb=1"
alt="" />
<Product
id="300"
title="Argan oil"
price={11.96}
rating={5}
image="https://s3.images-iherb.com/now/now04920/r/9.jpg"
alt="" />
</div>
</div>
)
}
export default Home;

I changed two things and error fixed
first in Product.js I changed name of function to Product(capitialzing)
second in reducer.js I changed ...action.item to action.item

1.change the function product to Product in component Product.js that is all and it should work.

its a very simple fix, so the issue is the useStateValue() must start with a capital letter. change it to "UseStateValue()" in the stateProvider.js file and then run it. the compiler will let you know where you have to make the changes and run it. it will solve it

I assume that you're using Context API and creating amazon clone from clever programmer youtube channel.
This error comes when <Home /> component not placed inside <StateProvider> component
Here is my StateProvider.js
import React, { useContext, createContext, useReducer } from 'react';
export const StateContext = createContext();
function StateProvider({ reducer, initialState, children}) {
return (
<StateContext.Provider value={ useReducer(reducer, initialState) }>
{ children }
</StateContext.Provider>
);
}
export const useStateValue = () => useContext(StateContext);
export default StateProvider;
App.js
import React from "react";
import Header from "./components/Header/Header";
import Home from "./components/Home/Home";
import { BrowserRouter, Routes, Route } from "react-router-dom";
function App() {
return (
<StateProvider reducer={Reducer} initialState={initialState} >
<div className="app">
<BrowserRouter>
<Routes>
<Route path="/" element={
<>
<Header />
<Home />
</>
} />
</Routes>
</BrowserRouter>
</div>
</StateProvider>
);
}
export default App;
So kindly check whether the <Home /> component is children of <StateProvider>. Only the child component of StateProvider can access useStateValue() hook.

React component is getting rendered twice

I am newbie to Reactjs and trying to develop the static website. so far was able to render the few components like carasouel and cards.
however, in the recent development , the specific <div> is getting rendered twice. while troubleshooting, i see that <div> is coming twice, but in the code , have written <div> just once. scratching my head how to fix this.
here is the code :
App.js
import React, { Fragment, Component } from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import { Button } from "react-bootstrap";
import Carasel from "./Components/carosel";
import Cards from "./Components/cards";
class App extends Component {
render() {
return (
<Router>
<Carasel />
<Cards />
</Router>
);
}
}
export default App;
index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
rootElement
);
card.js
import React, { Component } from "react";
import img1 from "../test/person1.jpg";
import "bootstrap/dist/css/bootstrap.min.css";
import { Button } from "react-bootstrap";
import "./card-style.css";
class Card extends Component {
render() {
const mouse = this.props.mouse;
return (
<div className="card text-center">
<div className="overflow">
<img src={img1} alt="image1" />
</div>
<div className="card-body text-dark" />
<h4 className="card-title">{mouse}</h4>
<p className="card-text text-secondary">lorem20</p>
<a href="#" className="btn btn-outline-success">
Go Anywhere
</a>
</div>
);
}
}
export default Card;
cards.js
import React, { Component } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Card from "./card";
class Cards extends Component {
render() {
return (
<div className="container-fluid d-flex justify-content-center">
<div className="row">
<div className="col-md-4">
<Card mouse="DevOps" />
</div>
<div className="col-md-4">
<Card mouse="Cloud Computing" />
</div>
<div className="col-md-4">
<Card mouse="Machine Learning" />
<Card />
</div>
</div>
</div>
);
}
}
export default Cards;
now the issue is : <div className="card text-center"> is getting rendered twice at the end. not getting where and which is the issue . while troubleshooting, seems the component is stateful ? please suggest

It seems you have an aditional card with no mouse in Cards? In the div at the end? I dont think that is supposed to be there.

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