here is my code where i'm trying to pass object like{title,description,backgroundImg ....} to section component using props , I am getting all the key & value but when I use it on section component getting all data value instead of backgroundImg why..?
import React from "react";
import Section from "./Section";
function Home() {
return (
<div>
<div className="container">
<Section
title="Model S"
description="Order Online for Touchless Delivery"
backgroundImg="model-s.jpg"
leftButton="custom order"
rightButton="existing inventory"
/>
<Section
title="Model Y"
description="Order Online for Touchless Delivery"
backgroundImg="../images/model-y.jpg"
leftButton="custom order"
rightButton="existing inventory"
/>
</div>
);
}
export default Home;
to
import React from "react";
import DownArrow from "../images/down-arrow.svg";
const Section = (props) => {
return (
<div
className="Wrap"
style={{ backgroundImage: `url(${props.backgroundImg})` }}
>
<div className="item_text">
<h1>{props.title}</h1>
<p>{props.description}</p>
</div>
<div className="">
<div className="item_buttom">
<div className="leftButton">{props.leftButton}</div>
<div className="RightButton">{props.rightButton}</div>
</div>
<div>
<img src={DownArrow} alt="svgImg" className="DownArrow" />
</div>
</div>
</div>
);
};
export default Section;
My image folder path is "../images/..."
You need to import image in your home component.
Like
import sectionImage from "../images/image.jpg";
then pass the image like
<Section
backgroundImg={sectionImage}
/>
Then it should work fine.
Related
I am making a cart and when I click Add to cart then the number of times increases this is done using hooks and is in the following Pricetag.jsx
import React from 'react'
import './Body.css'
import { useState } from 'react'
// import './Cart.js'
export default function Pricetag(props) {
const [count, setCartCount] = useState(0);
return (
<div>
<div className="card1">
<div className="image">
<img src={props.images} alt="" className='card-image' />
</div>
<div className="content">
<div className="name">
{props.name}
</div>
</div>
<div className="button">
<button className='btn no1' id='cartbutton' onClick={() => setCartCount(count + 1)} >
Add to cart
</button>
<br></br>
</div>
</div>
</div>
)
}
Now I want to use the value of count in other jsx,
import React from 'react'
import './Body.css'
import image2 from './assets/cake9.jpeg'
import image9 from './assets/cake16.jpeg'
import Pricetag from './Pricetag'
export default function Body(props) {
return (
<>
<div className="headingbody">
<div></div>
{props.title}
</div>
<div className="cart">
<div className="number34"> ** here I want to show my count **</div>
<i class="fa-solid fa-cart-shopping"></i>
</div>
<hr className='latestline' />
<div className='container1'>
<Pricetag images={image10} name="Swimming cake" bold="Rs 345" cut="Rs 634" />
<Pricetag images={image11} name="Rossy cake" bold="Rs 345" cut="Rs 634" />
</div>
</>
)
}
Can you tell me how can I use the value of count from the first to the second?
There are a few ways you can use:
state management: redux, zustand,...
using React Context
you can pass the value through props but it will cause 'hell props'
You have to pass the count state to the other JSX file (component). There are some ways:
Import the JSX file and call the component inside Pricetag.jsx, then pass count as a prop.
If you are unable to use the component inside Pricetag.jsx, then Use state management solutions like Context API, Redux, MobX etc.
brother, you can find the description and idea from the below document of useContext API calling and its functionaloty
https://www.geeksforgeeks.org/reactjs-usecontext-hook/
https://reactjs.org/docs/hooks-reference.html#usecontext
When I started the project, I never thought of adding a cart, but now I want to.
Let me tell you the structure,
I have a jsx called Pricetag.jsx in which I have defined how my card will look like it has name, image, and add to cart.
Here is my Pricetag.jsx
import React from 'react'
import './Body.css'
// import './Cart.js'
import { useState } from 'react'
export default function Pricetag(props) {
const [count, setCartCount] = useState([]);
return (
<div>
<div className="card1">
<div className="image">
<img src={props.images} alt="" className='card-image' />
</div>
<div className="content">
<div className="name">
{props.name}
</div>
</div>
<div className="button">
<button className='btn no1' id='cartbutton' onClick={() => setCartCount(count + 1)} >
Add to cart
</button>
<br></br>
</div>
</div>
</div>
)
}
And this is the Birthday.jsx where I have used Pricetag information using props,
import React from 'react'
import './Body.css'
import { Link } from 'react-router-dom'
import Pricetag from './Pricetag'
import image80 from './assets/cake80.jpeg'
import image81 from './assets/cake81.jpeg'
export default function Cakebody(props) {
return (
<>
<Link to='/' className="menulink con112 ">
<div className='name1' >Back to home page</div>
</Link>
<div className="headingbody">
{props.title}
</div>
<hr className='latestline' />
<div className='container1'>
<Pricetag images={image80} name="Doll Cake" bold="Rs 345" cut="Rs 634" />
<Pricetag images={image81} name="Mixed Platte Cake" bold="Rs 345" cut="Rs 634" />
</div> </>
)
}
Now first I tried my self, then after watching some tutorials I noticed that they all are using objects to store data -> id, name, price, and all but, is there any way I can do it without it.
I want to some how grab the name and image of the cake from the birthday.jsx and want to send it to a new cart.jsx.
In fact JS is an object, everything in JS is kind of an object
if you find way to do something is JS without using object let me know
I'm trying to send an image as a prop from
import React from "react";
import "./home.css";
import Product from "./Product";
function Home() {
return (
<div className="home">
<div className="home-container">
<img
className="home-image"
src={require("./nathan-oakley-gj1dnc7yRG0-unsplash.jpg")}
alt=""
/>
<div className="home-row">
<Product
title="Sofa Couch"
price={5000}
image={"./phillip-goldsberry-fZuleEfeA1Q-unsplash.jpg"}
rating={5}
/>
<Product />
</div>
<div className="home-row">
<Product />
<Product />
<Product />
</div>
<div className="home-row">
<Product />
<Product />
</div>
</div>
</div>
);
}
export default Home;
in the home-row class to
import React from "react";
import "./product.css";
function Product({ title, image, price, rating }) {
return (
<div className="product">
<div className="product-info">
<p>{title}</p>
<p>
<small>$</small>
<strong>{price}</strong>
</p>
<div className="product-rating">
{Array(rating)
.fill()
.map((_, i) => (
<p>*</p>
))}
</div>
</div>
<img src={require(`${image}`)} alt="" />
<button>Add to Basket</button>
</div>
);
}
export default Product;
this file. But the image is not showing. Even if I remove require it doesn't show up.
Earlier I was using a local image and it was working with require. But this doesn't.
When I inspect it with console, it says uncaught error, cannot find module 'image name'.
Having this file:
Product.jsx:
class Product extends React.Component{
render(){
return (
<div className='item'>
<div className='image'>
<img src="images/products/image-aqua.png" />
</div>
<div className="middle aligned content">
<div className="description">
<a>Fort Knight</a>
<p>Authentic renaissance actors, delivered in just two weeks.</p>
</div>
<div className="extra">
<span>Submitted by:</span>
<img src="images/avatars/daniel.jpg" className="ui avatar image" />
</div>
</div>
</div>
)
}
}
export default Product;
and ProductList.jsx:
import Product from "./Product";
class ProductList extends React.Component{
render(){
return (
<div className='ui unstackable items'>
<Product />
</div>
)
}
}
ReactDOM.render(
<ProductList />,
document.getElementById('content')
);
The React Class <Product /> is not rendered (If I try to simply paste the Product class into ProductList.jsx, no problem then, but I want separate files for each class, how to achieve that?)
Use in Product.jsx the import React from "react";
demo in stackblitz
First import React at the top.
import React from "react";
Second you might be giving the wrong address at the top. Make sure it is right. You know the path well. Apart from these I don't see any problem with the code.
import Product from "./Product";
I think I have written all the code right, but on the port I can only display app.js file
import React from 'react';
import ImgSlider from './ImgSlider';
import './App.css';
function App() {
return (
<div className="App" >
<div className="book-box">
<img src="" alt=""/>
<div>
<h1>Harry Potter</h1>
</div>
</div>
</div>
);
}
export default App;
and I want to import div element from ImgSlider
import React from 'react';
function ImgSlider() {
return (
<div>
<h3>Heading</h3>
<p>Description</p>
<img src="" alt=""/>
</div>
);
}
export default ImgSlider;
When i open browser it only shows HARRY POTTER from the App.js, I think it should also display div from the ImgSlider
Console massage Line 3:8: 'ImgSlider' is defined but never used no-unused-vars
Thanks for the attention
You arent rendering ImgSlider, just need to do this in App.js:
function App() {
return (
<div className="App" >
<div className="book-box">
<img src="" alt=""/>
<div>
<h1>Harry Potter</h1>
/* ADD this code*/
<ImgSlider />
</div>
</div>
</div>
);
}
This is just an example, you can add the <ImgSlider/> wherever you want.
To render some content from imported component you have to render it like:
return (
<div className="App" >
<div className="book-box">
<img src="" alt=""/>
<div>
<h1>Harry Potter</h1>
{/*Place it where you want to show it */}
<ImgSlider />
</div>
</div>
</div>
);
}
Simply add <ImgSlider /> into App
Your final code would look like this:
import React from 'react';
import ImgSlider from './ImgSlider';
import './App.css';
function App() {
return (
<div className="App" >
<div className="book-box">
<img src="" alt=""/>
<div>
<h1>Harry Potter</h1>
<ImgSlider />
</div>
</div>
</div>
);
}
export default App;