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/
Related
I am using react-zoom-pan-pinch library for zoomIn and zoomOut. The problem I’m having is when grabbing and pulling the image, it goes out of bounds. I read docs, and it seems I need to use limitToBounds={true} which helps, but then it won’t help 100% because the image still goes out of bounds. It should be stuck to bounds , so my question is how to make the image stuck to bounds/borders, you should not be able to pull it out of bounds(all functionalities should work, just image stuck to bounds/borders).
try it here: https://codesandbox.io/s/nice-bash-bzvrwf?file=/src/App.tsx
Image of my problem:
import React from "react";
import "./styles.css";
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
export default function App() {
return (
<div className="App">
<div className="element">
<TransformWrapper limitToBounds={true}>
{({ zoomIn, zoomOut, resetTransform }: any) => (
<React.Fragment>
<div style={{ border: "1px solid black" }}>
<div className="tools">
<button onClick={zoomIn}>+</button>
<button onClick={zoomOut}>-</button>
<button onClick={resetTransform}>x</button>
</div>
<TransformComponent>
<img
width="100%"
src="https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528__340.jpg"
alt="test 2"
/>
</TransformComponent>
</div>
</React.Fragment>
)}
</TransformWrapper>
</div>
</div>
);
}
you need to add these props inside the TransformWrapper component:
alignmentAnimation={{ sizeX: 0, sizeY: 0 }}
your example:
codesandboxexample
hope that help :)
i am using this module to actually get a ready to use text editor from draft.js
and I was trying to apply the styles on it by copying react-draft-wysiwyg.css from node_modules in dist folder to the src folder in react, and then I imported it, but css is not being applied on the editor, code:
import { Editor } from 'draft-js';
import convert from 'htmr';
import { EditorState } from 'draft-js';
import "./react-draft-wysiwyg.css";
import draftToHtml from 'draftjs-to-html';
import { convertToRaw } from 'draft-js';
function Component(){
// some code here unrelated to the current issue
return(
<div className='a'>
<head><meta charset="utf-8" /></head>
<button className='edit-btn' onClick={()=>setOpen(true)} style={{backgroundColor:theme.setButtonColor,color:theme.setTextColor}}>Edit</button>
<Dialog open={open} onClose={()=>setOpen(false)} fullWidth={true} maxWidth='lg' className='dialog'>
<button onClick={()=>setOpen(false)} style={{backgroundColor:'red',color:'white'}} className='edit-btn'>Close</button>
<div class='dialog-content'>
<form method='put' onSubmit={(e)=>handleEdit(e)}className='dialog-form'>
<div className='editor-div'>
<Editor UploadEnabled wrapperClassName='editor' onChange={(e)=>handleDescriptionChange(e)} editorClassName='texteditor'editorState={editorState} onEditorStateChange={setEditorState}></Editor>
</div>
<button type='submit' className='edit-btn' style={{backgroundColor:theme.setButtonColor,color:theme.setTextColor}}>Submit Change</button>
</form>
</div>
</Dialog>
</div>
)
}
``` all I see is empty page in the dialog
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
I have a website page that uses react-anime and react-typing-animation. My issue is to animate some elements displayed on it only once while the current session. So, if my site was opened on the main page, the animation would launch, and then, after switching a few pages and returning back to the main page, the animation wouldn't be executed again.
I've thought about sessionStorage, but I don't understand how to use it with these libraries.
Here's all the code:
index.js
import React from 'react'
import styles from './Index.module.css'
import Greeting from '../components/main/Greeting'
import Yelnya from '../components/main/Yelnya/Yelnya'
import BlueLakes from '../components/main/BlueLakes'
import Gallery from "../components/main/Gallery";
export default function Home() {
return (
<div className={styles.container}>
<Greeting />
<Yelnya />
<BlueLakes />
<Gallery />
</div>
)
}
Greeting.js
import React from 'react'
import styles from './Greeting.module.css'
import Tag from './Tag'
import Anime from "react-anime";
import Typing from "react-typing-animation"
export default function Greeting() {
return (
<div className={styles.root}>
<div className={styles.title}>
<Typing startDelay={50} speed={100}>
Explore Belarusian nature with us.
</Typing>
</div>
<div className={styles.hint}>
<Anime
opacity={[0,1]}
translateX={[-50,0]}
duration={3000}
delay={4200}
>
<p className={styles.hintTitle}>Go to:</p>
</Anime>
<Tag title="#Yelnya" link="/#yelnya" delay={4400}/>
<Tag title="#Blue lakes" link="/#blue-lakes" delay={4500}/>
<Tag title="#Galleries" link="/#galleries" delay={4600}/>
</div>
</div>
)
}
Tag.js
import React from 'react'
import styles from './Tag.module.css'
import Link from 'next/link'
import Anime from "react-anime";
export default function Tag({ title, link, delay }) {
return (
<Anime
opacity={[0,1]}
translateY={[50,0]}
duration={3000}
delay={delay}
>
<Link href={link}>
<div className={styles.tag}>
<p className={styles.text}>{title}</p>
</div>
</Link>
</Anime>
)
}
I made an example for using LocalStorage and handle animation with them
export default function App() {
const animated = !!localStorage.getItem("animated");
if (animated === false) {
localStorage.setItem("animated", true);
}
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
{!animated && (
<Anime
opacity={[0, 1]}
translateX={[-50, 0]}
duration={3000}
delay={500}
>
<p>Go to:</p>
</Anime>
)}
{animated && <p>Go to:</p>}
</div>
);
}
also you can test it here
I have been trying to use material-ui and iterate over it inside an array ( for creating ratings for some items like in e-commerce sites). The code isn't working. On my localhost server, it's not showing any stars at all. Before I made it dynamic, it was working all fine, then I added props to my functional component as per to make it dynamic. Everything else is working just fine except that it's not accepting my matrial-ui icon inside the array for me to iterate over. Moreover, the import statement says "it's value is never read although it's imported"
My code: Product.js:
import React from "react";
import "./Product.css";
import StarRateIcon from "#material-ui/icons/StarRate";
function Product({ id, title, image, price, 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((_, i) => (
<p StarRateIcon className="star" />
))}
</div>
</div>
<img src={image} alt="" />
<button>Add to Basket</button>
</div>
);
}
export default Product;
My home.js file :
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="https://m.media-amazon.com/images/G/01/digital/video/sonata/US3P_JOKER_IMAGE_ID/be07783e-2738-4aaf-b90c-d0ec474d15ae._UR3000,600_SX1500_FMwebp_.jpg"
/>
<div className="home_row">
<Product
id="890778"
title="Description"
price={99.99}
image="https://m.media-amazon.com/images/I/71BGLa7IFtL._AC_UY218_.jpg"
rating={5}
/>
<Product />
</div>
</div>
</div>
);
}
export default Home;
Help Somebody! I can use emoji snippets but I really want this to work. I have imported StarRateIcon and used it. It isn't working.
Looks like you accidentally put a 'p' in front of your icon component name. You have <p StarRateIcon className="star" /> when it should be <StarRateIcon className="star" />
You're rendering a p tag with no content with an invalid attribute, StarRateIcon. It's the reason you're not seeing anything rendered. If you inspect the HTML, you'll most likely see the p tags. You may also see errors in the console about invalid attributes. Your code should look something like this:
Array(rating).fill().map(() => <StarRateIcon className="star" />)