I am using react-bootstrap to create a carousel, but all of the carousel items are disabled.
I tried the official example like they did on the website, and its not working. Any ideas what's going wrong?
function Project({ href, title, img, description }) {
return (
<Carousel.Item className="work-carousel-item">
<img className="d-block w-100" src={img} alt={title}/>
<Carousel.Caption>
<h3>{title}</h3>
<p>{description}</p>
</Carousel.Caption>
</Carousel.Item>
);
}
function Work() {
return (
<section id="work">
<Carousel class="mt-5">
<Project href="#" title="Example 1" img={ImgVkMeshShaderExample} description="I'm a description"/>
<Project href="#" title="Example 1" img={ImgVkMeshShaderExample} description="I'm a description 2"/>
</Carousel>
</section>
)
}
Related
I am trying to get data using API and loop it for banner images.
I got the data. And it is working fine. Here is the code to get the data.
///Retrieving data using API
const [post, setPost] = useState(null);
useEffect(() => {
axios.get(global.url+'api/welcome').then(response => {
setPost(response.data);
});
}, []);
Now, I want to show images in the banner. In the first loop div class needs to <div className="carousel-item active"> as shown in the image. From the second loop active need to be removed to be like: <div className="carousel-item">.
////Looping for banner images
post[1].data.map((banner_image) => (
<div>
<div className="carousel-item active">
<img src="image source here" className="d-block w-100" alt="" />
</div>
</div> ))
In this case how to use the if condition? I am very new to React Js.
Thank you, in advance.
You could do conditions in your JSX as below. Notice the {} for className.
post[1].data.map((banner_image, index) => (
<div>
<div className={"carousel-item " + (index === 0 ? "active" : "")}>
<img src="image source here" className="d-block w-100" alt="" />
</div>
</div> ))
Try this
////Looping for banner images
post[1].data.map((banner_image, idx) => (
<div key={idx}>
<div className={`carousel-item ${idx === 0 ? "active" : ""}`}>
<img src="image source here" className="d-block w-100" alt="" />
</div>
</div> ))
You can use template literals in JSX.
post[1].data.map((banner_image, index) => (
<div key={`uui-${index}`}>
<div className={`carousel-item ${index === 0 ? 'active' : ''}`}>
<img src="image source here" className="d-block w-100" alt="" />
</div>
</div> ))
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'.
I am working in this react-bootstrap carousel. Current code is working well:
function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<Carousel>
<Carousel.Item>
<img
className="d-block w-100"
src="https://res.cloudinary.com/tpostr/image/upload/v1553865338/paparouna/IMG_7638-01.jpg"
alt="First slide"
/>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
src="https://res.cloudinary.com/tpostr/image/upload/v1553865338/paparouna/IMG_7638-01.jpg"
alt="First slide"
/>
</Carousel.Item>
</Carousel>
</div>
);
}
Demo working well
Now Im trying to separate Carousel.Item to other component, so I can use it without repeating myself. But the image doesnt appear:
const CarouselItem = () => (
<Carousel.Item>
<img
className="d-block w-100"
src="https://res.cloudinary.com/tpostr/image/upload/v1553865338/paparouna/IMG_7638-01.jpg"
alt="First slide"
/>
</Carousel.Item>
);
function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<Carousel>
<CarouselItem />
<CarouselItem />
</Carousel>
</div>
);
}
Demo with error
I have tried wrapping the component with forwardRef, but didnt work. What Im doing wrong? Note: I need CarouselItem to be a component/function in order to be able to send props to it.
When you render the Carousel.Item in a separate component, you need to forward the props to it.
Internally Carousel will be using React.cloneElement to add extra props to the Carousel.Item which when you use a custom component need to forward to Carousel.Item
const CarouselItem = (props) => (
<Carousel.Item {...props}>
<img
className="d-block w-100"
src="https://res.cloudinary.com/tpostr/image/upload/v1553865338/paparouna/IMG_7638-01.jpg"
alt="First slide"
/>
</Carousel.Item>
);
Working demo
Bootsrap carousel Items unique key error.i added the right place my key.but error won't go away.
here is my error.
when i inspect in elements,i think i added to the right place.but react giving me warning over and over again.
this is my code.
return (
<>
<Carousel activeIndex={index} onSelect={handleSelect} keyboard slide touch wrap pause={false}>
{movie.map((m) =>
<Carousel.Item key={m.id}>
<img
src={m.background_image_original}
alt={m.title_english}
/>
<Carousel.Caption>
<CaptionDiv >
<h4>suggestions</h4>
<h2>{m.title}</h2>
<CaptioninfoDiv className='mr-auto'>
<p className='mr-3'>{m.year}</p>
{m.genres.map((g) =>
<p className='mr-1'>{g}</p>
)}
<p className='ml-3'>{m.runtime} min</p>
</CaptioninfoDiv>
<CaptionInfoMain >
<p>{m.summary.slice(0, 200)}<Readmore> Read more...</Readmore> </p>
<a href={`https://www.youtube.com/watch?v=${m.yt_trailer_code}`} target="_blank" rel="noreferrer" className='btn btn-danger btn-lg'>Watch Trailer</a>
</CaptionInfoMain>
</CaptionDiv>
</Carousel.Caption>
</Carousel.Item>
)}
</Carousel>
</>
)
Your movie.map((m) => is giving keys to its children, but your m.genres.map((g) => is not. Assuming that there aren't any duplicate generes, you can use
{
m.genres.map((g) =>
<p className='mr-1' key={g}>{g}</p>
)
}
const CharacterList = () => {
const [change, setChange] = React.useState(false);
const QuickSilver= () => setChange(!change);
const SuperMan= () => setChange(!change);
return (
<div id="character" className="list">
<img id="icons" className="one" src={QuickSilverIc} onClick={QuickSilver} />
{change && (
<img className="card" src={QuickSilverStat} />
)}
<img id="icons" className="two" src={SuperManIc} onClick={SuperMan} />
{change && (
<img className="card" src={SuperManStat} />
)}
So, when i click on the QuickSilver img that bring me the img with src={SuperManStat} and not {QuickSilverStat}
If anyone can help me it will be very nice !
ps: yeah i've cut the react components to show you only what i want ofc ive done averything correctly, like import export etc...
what you need to do is create to different useStates one for quicksilver and the other one for superman, or create an object with this shape
const [hero, SetHero] = useState({superman: false, quicksilver:false});
and then in your onClickhandler you can pass the name and update the state to right hero
{change ? (
<>
<img id="icons" className="one" src={QuickSilverIc} onClick={QuickSilver} />
<img className="card" src={QuickSilverStat} />
</>
) : (
<>
<img id="icons" className="two" src={SuperManIc} onClick={SuperMan} />
<img className="card" src={SuperManStat} />
</>
)}
As I understand, you want to show only one of them. To achieve this, you should wrap both images of each one together, and show only one of them on each change value (true or false):
{change && (
<div>
<img id="icons" className="one" src={QuickSilverIc} onClick={QuickSilver} />
<img className="card" src={QuickSilverStat} />
</div>
)}
{!change && (
<div>
<img id="icons" className="two" src={SuperManIc} onClick={SuperMan} />
<img className="card" src={SuperManStat} />
</div>
)}