Scroll into view in react

Question

I am making a simple react app where there are two different div's..

One with select input and selected list,

  
    
      Item One
      Item Two
      Item Three
      Item Four
      Item Five

Another will list down the selected option as fieldset,

  
    {selectedElements.map((item, i) => (
      
        
          {item}
        
      
    ))}

Based on this solution, I have added createRef to the selected element like,

Then I took Javascript query methods to get DOM elements like,

  const chipsArray = document.querySelectorAll("#container > div > .chip");

Added click event listener to all the elements like,

  chipsArray.forEach((elem, index) => {
    elem.addEventListener("click", scrollSmoothHandler);
  });

Then scrollSmoothHandler like,

const scrollDiv = createRef();

  const scrollSmoothHandler = () => {
    console.log(scrollDiv.current);
    if (scrollDiv.current) {
      scrollDiv.current.scrollIntoView({ behavior: "smooth" });
    }
  };

But this doesn't work the way as expected.

Requirement:

On click over any item in first div, then its related fieldset needs to get smooth scrolled in another div..

Eg: If user click on the element Item Four under

... Item Four ...

then the related fieldset needs to get scrolled into. Here the fieldset with legend as Item Four ..

I think also making the js dom query methods on react and it seems not a react way of implementation. Can anyone please kindly help me to achieve the result of scrolling to a related fieldset on click over the selected item..

Drew Reese · Accepted Answer

Issue

React.createRef is really only valid in class-based components. If used in a functional component body then the ref would be recreated each render cycle.
Don't use a DOM query selector to attach onClick listeners to DOM elements. These live outside react and you'd need to remember to clean them up (i.e. remove them) so you don't have a memory leak. Use React's onClick prop.
When the selectedElements are mapped you attach the same ref to each element, so the last one set is the one your UI gets.

Solution

Use React.useRef in the functional component body to store an array of react refs to attach to each element you want to scroll into view.
Attach the scrollSmoothHandler directly to each span's onClick prop.
Attach each ref from the ref array created in 1. to each mapped field set you want to scroll to.

Code

import React, { createRef, useRef } from "react";
import { render } from "react-dom";

const App = () => {
  const selectedElements = [
    "Item One",
    "Item Two",
    "Item Three",
    "Item Four",
    "Item Five"
  ];

  // React ref to store array of refs
  const scrollRefs = useRef([]);

  // Populate scrollable refs, only create them once
  // if the selectedElements array length is expected to change there is a workaround
  scrollRefs.current = [...Array(selectedElements.length).keys()].map(
    (_, i) => scrollRefs.current[i] ?? createRef()
  );

  // Curried handler to take index and return click handler
  const scrollSmoothHandler = (index) => () => {
    scrollRefs.current[index].current.scrollIntoView({ behavior: "smooth" });
  };

  return (
    
      
        
          {selectedElements.map((el, i) => (
            
              {el}
            
          ))}
          
        
      
      
        {selectedElements.map((item, i) => (
          
            
              {item}
            
          
        ))}
      
    
  );
};

Solution #2

Since you can't update any elements in the div with id="container" and all the onClick handlers need to be attached via querying the DOM, you can still use a curried scrollSmoothHandler callback and enclose an index in scope. You'll need an useEffect hook to query the DOM after the initial render so the spans have been mounted, and an useState hook to store a "loaded" state. The state is necessary to trigger a rerender and re-enclose over the scrollRefs in the scrollSmoothHandler callback.

const App = () => {
  const selectedElements = [
    "Item One",
    "Item Two",
    "Item Three",
    "Item Four",
    "Item Five"
  ];

  const [loaded, setLoaded] = useState(false);
  const scrollRefs = useRef([]);

  const scrollSmoothHandler = (index) => () => {
    scrollRefs.current[index].current.scrollIntoView({ behavior: "smooth" });
  };

  useEffect(() => {
    const chipsArray = document.querySelectorAll("#container > div > .chip");

    if (!loaded) {
      scrollRefs.current = [...Array(chipsArray.length).keys()].map(
        (_, i) => scrollRefs.current[i] ?? createRef()
      );

      chipsArray.forEach((elem, index) => {
        elem.addEventListener("click", scrollSmoothHandler(index));
      });
      setLoaded(true);
    }
  }, [loaded]);

  return (
    
      
        
          Item One
          Item Two
          Item Three
          Item Four
          Item Five
          
        
      
      
        {selectedElements.map((item, i) => (
          
            
              {item}
            
          
        ))}
      
    
  );
};

Scroll into view in react

Answers (1)

Issue

Solution

Solution #2

Related Questions