Develop Reference

My carousel with react-bootstrap has no active items

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>
)
}

React, how to use if condition inside a div to change its className?

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> ))

Cannot use images with props in React

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'.

How to set an an active class to a variable - React

My first question on S.O. let's see how it goes.
I'm trying to set the "active class" to a variable in my Home.js, and pass down the value, as a prop to my <Buddy /> component. Once there I will set that to an integer to decide what slide my text carousel goes to. I'll figure out that part (but if you know, spare me the time).
I'm using an npm package react-scroll to scroll to that component once clicked. Then the component is set to "active". I will drop some code.
Nav bar section in the Home.js component..
return (
<div className="navBar">
<div className="navItem">
<Link
activeClass='active'
to="home"
spy={true}
smooth={true}
offset={0}
className='nav-Link'>
<h2>Home</h2>
</Link>
</div>
<div className="navItem">
<Link
activeClass='active'
to="projects"
spy={true}
smooth={true}
offset={0}
className='nav-Link'>
Projects
</Link>
</div>
<div className="navItem">
<Link
activeClass='active'
to="mission"
spy={true}
smooth={true}
offset={0}
className='nav-Link'>
Mission
</Link>
</div>
<div className="navItem">
<Link
activeClass='active'
to="about"
spy={true}
smooth={true}
offset={0}
className='nav-Link'>
About
</Link>
</div>
<div className="navBar">
<Link
activeClass='active'
to="contact"
spy={true}
smooth={true}
offset={0}
className='nav-Link'>
Contact
</Link>
</div>
</div>
My component sitting right beneath.
<Buddy />
Each component on my SPA/Portfolio has an id that the on my nav bar looks to go to.
//Projects.js
const Projects = () => {
return (
<div className="projectsComponent" id="projects">
</div>
)
}
So when it scrolls to the component, it sets that div? or component? to active.
// back in Home.js
<div className="navItem">
<Link
activeClass='active' <-----------
to="projects"
spy={true}
smooth={true}
offset={0}
className='nav-Link'>
Projects
</Link>
</div>
I just want to set whatever I need to, into a variable in Home.js to pass down as a prop to <Buddy />. Thanks, guys! Remember it's my first question ever! Be nice!
** If you have a better idea, like when the scroll reaches that component, set the index of my carousel to 1,2,3.. let me know too. Thanks
*** I will also include my <SpeechCarousel /> component here. It lives in my <Buddy /> component and ill pass another prop to it. Thanks again.
import React, {useState} from 'react'
import Carousel from 'react-bootstrap/Carousel'
import "../styles/css/Buddy.css"
const SpeechCarousel = () => {
const [index, setIndex] = useState(0);
const handleSelect = (selectedIndex, e) => {
setIndex(selectedIndex);
};
return (
<div id="carousel2">
<Carousel activeIndex={index} onSelect={handleSelect} interval={null}>
<Carousel.Item className="car2item">
<p>TEXT</p>
</Carousel.Item>
<Carousel.Item className="car2item">
<p>TEXT</p>
</Carousel.Item>
<Carousel.Item className="car2item">
<p>TEXT</p>
</Carousel.Item>
<Carousel.Item className="car2item">
<p>TEXT</p>
</Carousel.Item>
<Carousel.Item className="car2item">
<p>TEXT</p>
</Carousel.Item>
</Carousel>
</div>
)
}
export default SpeechCarousel;

Problem on React, onClick take the last var and note the choosen one

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>
)}