React button lifecycle

Question

this is my hacknews project i don't know why this button not working

// popular
let curPos = 0;
let position = 0;
const BOX_WIDTH = 220;
const items = document.querySelector(".home_popular");
function prev() {
  if (curPos > 0) {
    position += BOX_WIDTH;
    items.style.transform = `translateX(${position}px)`;
    curPos = curPos - 1;
  }
}

function next() {
  if (curPos < 4) {
    position -= BOX_WIDTH;
    items.style.transform = `translateX(${position}px)`;
    curPos = curPos + 1;
  }
}
//new
let new_curPos = 0;
let new_position = 0;
const NEW_BOX_WIDTH = 282;

const new_items = document.querySelector(".box_container");
function new_prev() {
  if (new_curPos > 0) {
    new_position += NEW_BOX_WIDTH;
    new_items.style.transform = `translateX(${new_position}px)`;
    new_curPos = new_curPos - 1;
  }
}
function new_next() {
  if (new_curPos < 3) {
    new_position -= NEW_BOX_WIDTH;
    new_items.style.transform = `translateX(${new_position}px)`;
    new_curPos = new_curPos + 1;
  }
}

function Home() {
  return (
    <div className="container">
      <div className="main_word flex">
        <div className="word_home">
          <h2>Check out today's</h2>
          <h2>popular information</h2>
        </div>

        <img src={`/assets/headline.svg`} alt="star" className="star" />
      </div>

      <div className="home_popular">
        <HomeContents />
      </div>

      <button className="move_btn_right" onClick={next}>
        <img src={`/assets/arrow_forward.svg`} alt="" />
      </button>
      <button className="move_btn_left" onClick={prev}>
        <img src={`/assets/arrow_back.svg`} alt="" />
      </button>

      <div className="today_new">
        <p className="today_new_word">Today's New!</p>

        <div className="box_container">
          <div className="box4">
            <HomeContentsNew />
          </div>
          <div className="box4">
            <HomeContentsAsk />
          </div>
          <div className="box4">
            <HomeContentsShow />
          </div>
          <div className="box4">
            <HomeContentsJobs />
          </div>
        </div>

        <button className="today_new_btn_right" onClick={new_next}>
          <img src={`/assets/arrow_forward.svg`} alt="" />
        </button>
        <button className="today_new_btn_left" onClick={new_prev}>
          <img src={`/assets/arrow_back.svg`} alt="" />
        </button>
      </div>
    </div>
  );
}

export default Home;

this is my main page code this project use React! Is there a problem with this code's life cycle?

this code error is

** TypeError Cannot read properties of null (reading 'style') **

and i want to know how to make touch slide in react

i want to change this button to slider help me

Answer 1

The problem is that items and new_items are null when you try to access their style property with items.style.transform or new_items.style.transform.

Try adding a condition before or optional chaining, for example.

Like this:

items?.style?.transform