TypeError: Cannot read property 'style' of null

JavaScript
1

the else is giving the error

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


  if (chosenColor === "/assets/silver-closed.png") {
    document.getElementById("goldd").style.visibility = "hidden";
    document.getElementById("silverr").style.visibility = "visible";
  } else{
    document.getElementById("silver").style.visibility = "hidden";
    document.getElementById("goldd").style.visibility = "visible";
  }

  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)}
                >
                  <img src={color} alt="thumb" />
                </div>
              ))}
            </div>

            <div id="goldd">
              <Product
                id="gold"
                title="Gold-charger"
                price={24.99}
                rating={5}
                image="/assets/gold-closed.png"
                discount={40.99}
              />
            </div>

            <div id="silverr">
              <Product
                id="silver"
                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;
3

Also, using document.getElementById in a React component seems really weird, when you could as well put that logic somewhere in your render method.

1 Like
4

It does seem like a case for conditional rendering to me as well.

I might understand using visibility if you wanted to remove a single element but keep the space it creates. But in the case of switching out elements based on some conditions, conditionally rendering the elements is the normal way to do it.

5

can you tell me how to hide that goldd one and reveal the other one when the image changes.