React text rendering issue
I use Array.map and I style this text and it’s show both style and not styled text. What happen can someone help me?
13 Replies
without seeing your code, there's no useful way to answer
check #How To Ask Good Questions for tips
Can you paste the code instead of sharing screenshots photos of your monitor?
{data.map((item, index) => {
return (
<div className={index === activeIndex ? "slides active" : "slides"}>
<img src={item.image} alt="img" key={index.id} />
</div>
);
})}
{data.map((info, index) => {
return (
<div className="slide-info">
<h4
className={
index === activeIndex
? info.availableActive
: info.availableStyle
}
>
{info.available}
</h4>
<h3
className={
index === activeIndex ? info.titleActive : info.titleStyle
}
>
{info.title}
</h3>
<button
className={index === activeIndex ? info.btnActive : info.btnStyle}
>
{info.btn}
</button>
</div>
);
})}
<div className="cloud-bg">
<img src={cloud1} alt="cloud" style={{ "--i": "1" }} />
<img src={cloud2} alt="cloud" style={{ "--i": "2" }} />
<img src={cloud3} alt="cloud" style={{ "--i": "3" }} />
<img src={cloud4} alt="cloud" style={{ "--i": "4" }} />
<img src={cloud5} alt="cloud" style={{ "--i": "5" }} />
</div>
</div>
);
};
export default SliderCard;
import slide1 from "./assets/slide-01.jpg";
import slide2 from "./assets/slide-02.jpg";
import slide3 from "./assets/slide-03.jpg";
export const MAINSLIDE = [
{
id: 11,
image: slide1,
title: "Elden Ring",
titleStyle: ["animatefadeInUp", "animatefadeOut"],
titleActive: "animatefadeInUp",
available: "Available ON PS5",
availableStyle: ["animatefadeInDown", "animatefadeOut"],
availableActive: "animatefadeInDown",
btn: "Get Now",
btnStyle: ["animatezoomIn", "animatefadeOut"],
btnActive: "animatezoomIn",
},
{
id: 22,
image: slide2,
title: "The Last of Us Part 2",
titleStyle: ["animatelightSpeedInRight", "animatefadeOut"],
titleActive: "animatelightSpeedInRight",
available: "Available Now",
availableStyle: ["animaterollIn", "animatefadeOut"],
availableActive: "animaterollIn",
btn: "Get Now",
btnStyle: ["animatefadeInUpBig", "animatefadeOut"],
btnActive: "animatefadeInUpBig",
},
{
id: 33,
image: slide3,
title: "Nier:Automata",
titleStyle: ["animaterotateInUpRight", "animatefadeOut"],
titleActive: "animaterotateInUpRight",
available: "Top Rated",
availableStyle: ["animaterotateInDownLeft", "animatefadeOut"],
availableActive: "animaterotateInDownLeft",
btn: "Get Now",
btnStyle: ["animaterotateIn", "animatefadeOut"],
btnActive: "animate__rotateIn",
},
];
Please read the thread I linked 😦 it tells you how to share code that's readable. Discord formatting is messing it up into an unreadable mess
Srry 😅
I think you missed a couple of files that might be important, especially the slider.css
I think the issue might be that you're trying to set className to an array, which doesn't work. I can't test that though, because while the code is visible in the stackblitz, it doesn't actually run
easiest test would be to change these lines in mainslide.js
to
(note the removal of
[])
and then of course for btnStyle and availableStyle as wellIt’s working tysm 🫶
Np, glad to help