document.querySelector is not working in my react component

Question

function Slider() {
  const track=document.querySelector('.slide__track')//To access the div with class slide track
  console.log(track);
  return (
    <div className="slider">
      <i className="fas fa-chevron-left"></i>
      <div className="head">
        <h1 className="title">Based on your last search</h1>
        <h6>View more</h6>
      </div>
      <div className="slider_container">
        <ul className="slider__track">
          <li className="slider__items">
            <Card />
          </li>
        </ul>
      </div>
      <i className="fas fa-chevron-right"></i>
    </div>
  );
}

i cannot access the div with class slide__track. What is the problem here? Or how can i access that element?

Notice that apart from the answers below you also use different names on the css-selector, slide__track vs slider__track — row
– row, Commented Jun 7, 2021 at 11:20

Atif · Accepted Answer · 2021-06-07 11:12:39Z

6

I think it's because it is running before the DOM has been rendered. Move the track code into useEffect.

import {useEffect} from "react";

function Slider() {

  useEffect(() => {
    const track=document.querySelector('.slide__track')//To access the div with class slide track
    console.log(track);
  });

  return (
    <div className="slider">
      <i className="fas fa-chevron-left"></i>
      <div className="head">
        <h1 className="title">Based on your last search</h1>
        <h6>View more</h6>
      </div>
      <div className="slider_container">
        <ul className="slider__track">
          <li className="slider__items">
            <Card />
          </li>
        </ul>
      </div>
      <i className="fas fa-chevron-right"></i>
    </div>
  );
}

answered Jun 7, 2021 at 11:12

Atif

10.9k22 gold badges68 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Atif Over a year ago

Did you also fix the part @row wrote in his comment? The class names are mismatched slider__track vs slide__track

Erfan HosseinPoor · Accepted Answer · 2021-06-07 11:59:25Z

4

Try and use this code in useEffect()

useEffect(() => {
    const track = document.querySelector('.slide__track')
    // have access to it
}, []);

edited Jun 7, 2021 at 11:59

answered Jun 7, 2021 at 11:15

Erfan HosseinPoor

1,0877 silver badges10 bronze badges

1 Comment

row Over a year ago

Elaborate more.

Squiggs. · Accepted Answer · 2021-06-07 12:08:25Z

You should be probably be using ref's to access dom elements inside react. see docs: https://reactjs.org/docs/refs-and-the-dom.html - reason being, if you have the below in a loop, or have multiple instances on the page, you'll need to be more careful with the selector approach.

import React, { useRef, useEffect } from 'react';

function Slider() {


  const slideTrackRef = useRef(null);

  useEffect(() => {
    if (slideTrackRef && slideTrackRef.current) {
      console.log(slideTrackRef.current);
    }
  }, [slideTrackRef]);

  return (
    <div className="slider">
      <i className="fas fa-chevron-left" />
      <div className="head">
        <h1 className="title">Based on your last search</h1>
        <h6>View more</h6>
      </div>
      <div className="slider_container">
        <ul className="slider__track" ref={slideTrackRef}>
          <li className="slider__items">
            <p>tst</p>
          </li>
        </ul>
      </div>
      <i className="fas fa-chevron-right" />
    </div>
  );
}

export default Slider;

Rasitha Gamage · Accepted Answer · 2024-06-18 06:43:20Z

0

For some reaseon .querySelector("#myId1") didn't work for me but .querySelector("[id="#myId1"]")

answered Jun 18, 2024 at 6:43

Rasitha Gamage

694 bronze badges

Collectives™ on Stack Overflow

document.querySelector is not working in my react component

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related