How can i render conditionally

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 :slight_smile:

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;


Hi @oguzhanefe32. We all go through such frustrations. I have noticed two things.

  1. Your component is bloated. I recommend extracting some elements in a different component.
  2. I don’t think you are using state properly. I don’t see any reason of having two useState hooks. But if you want it that way I suggest change the second one to const [colorId, setColorId] = useState(0) so that you will switch the indices.
    If you want to render conditionally, you can do something like
    {colorId === 0 ? < Gold /> : null }

and

    {colorId ===  1 ? < Silver /> : null }

You can replace Gold and Silver with the components/elements you want to render.

hi how can i replace the gold or the silver tags to an id or something and where should i put thoose codes

Where are you importing Product from? Can you do the same for groups of elements that belong together. For example you can create a file, give it a meaningful name and extract element with class extender into it, write a component and import it like you did to Product. That cleans your parent component. You will then pass data as props.

1 Like

sorry just got lightened up before you replyed but thanks for paying attention and replying. good night.

it gived an error of “Expected an assignment or function call instead saw an expression” when i used it like this

  {chosenColor === "/assets/silver-closed.png" ? < Gold /> : null }
  {chosenColor === "/assets/gold-closed.png" ? < Silver /> : null }

You are just running the functions on the first load.

onClick={setChosenColor(color), plsfingwork()}

If you want to pass an argument to the function you can wrap it inside an anonymous function

onClick={(idx) => setChosenColor(idx)}

I also agree with what was said about using the index. If the map is just of an array of images (string paths) then using the index would likely make more sense.


Edit: Here is a quick example as well just in case