i want to reveal the silver product and when the silver is revealed the gold one should be hidden like conditional rendering i have product color chooser im using it to make that conditional render can you make it for me please i have been trying to make that thing like for 5 days and it didn’t worked out i was literally gonna cry from anger heres the code
import React from "react";
import "./Home.css";
import $ from "jquery";
import { useState } from "react";
import { BsArrowRight } from "react-icons/bs";
import Fade from "react-reveal/Fade";
import ReactPaginate from "react-paginate";
import Product from "./Product";
function Home() {
const [colors] = useState([
"/assets/gold-closed.png",
"/assets/silver-closed.png",
]);
const [chosenColor, setChosenColor] = useState(colors[0]);
return (
<div>
<div>
<div className="the">
<Fade left delay={1050}>
<div className="carousel-wrapper">
<span id="item-1"></span>
<span id="item-2">
<a href="#sectionid1"></a>
</span>
<span id="item-3">
<a href="#sectionid1"></a>
</span>
<div className="carousel-item item-1">
<a className="arrow arrow-prev" href="#item-3"></a>
<a className="arrow arrow-next" href="#item-2"></a>
</div>
<div className="carousel-item item-2">
<a className="arrow arrow-prev" href="#item-1"></a>
<a className="arrow arrow-next" href="#item-3"></a>
</div>
<div className="carousel-item item-3">
<a className="arrow arrow-prev" href="#item-2"></a>
<a className="arrow arrow-next" href="#item-1"></a>
</div>
</div>
</Fade>
<Fade top delay={2050}>
<p id="main-price">$24.99 </p>
<p id="main-discounted">$40.99</p>
<div id="buynow1">
<a href="/">Buy now</a>
</div>
</Fade>
</div>
<div className="second-section">
<img
data-aos="fade-down"
id="backgroundedsilver"
src="/assets/silver-backgrounded.png"
alt=""
/>
<p id="description">
With our <b>miracolous product</b> you will live the premium feel of
it and it will <b>charge your phone fast</b>, it's{" "}
<b>sleek and minimalistic</b> design will look really nice on your
car.
</p>
<p id="formore">
{" "}
<a href="./productpage">
For more information <BsArrowRight />
</a>
</p>
</div>
<div id="sectionid1" datatype="section1data" className="section1">
<h1 id="headh1">Wireless Phone Charger</h1>
<div className="product">
<div className="main-img">
<img src={chosenColor} className="pro-img" alt="product" />
</div>
<div className="thumb-img">
{colors.map((color, i) => (
<div
className="box active"
key={i}
onClick={setChosenColor(color), plsfingwork()}
>
<img src={color} alt="thumb" />
</div>
))}
</div>
<div id="p1">
<Product
title="Gold-charger"
price={24.99}
rating={5}
image="/assets/gold-closed.png"
discount={40.99}
/>
</div>
<div id="p2">
<Product
title="Silver-charger"
price={24.99}
rating={5}
image="/assets/silver-closed.png"
discount={40.99}
/>
</div>
{/* <img data-aos="fade-down" id="stars" src="/assets/stars.png" alt=""/>
<p id="commentnum">(160)</p>
<p id="withdiscount">$24.99</p>
<p id="withoutdiscount">$40.99</p>
</div>
<div><a id="buynow" href="/">Buy Now</a></div>
<div><a id="addtocart" href="#">Add to cart</a>*/}
</div>
</div>
<div className="transparent">
<p>transparent</p>
</div>
</div>
<div className="extender">
<footer>
<h1 id="II">Ä°mportant Ä°nformation</h1>
<p id="pp">Privacy Policy</p>
<p id="tof">Terms of Service</p>
<p id="sp">Shipping Policy</p>
<p id="rp">Refund Policy</p>
<h1 id="MS">Menu Shortcuts</h1>
<p id="copyright">Copyright ®</p>
</footer>
</div>
</div>
);
}
export default Home;