ReactJS – Refs in Lists

I found the following technique the easiest to deal with a list of Refs.

// Array of Elements
  const textInput = []

  // CallBack Ref - Store the Element and push to an Array
  // "Refs are guaranteed to be up-to-date before componentDidMount or componentDidUpdate fires"  
  const setTextInputRef = element => {
    textInput.push(element);
  }

  // Everytime there is a re-render we scroll into view the active text input
  useEffect(() => {

    // We need to ensure that textInput array is filled up before we attempt doing anything
    textInput.length > 0 && props.currentVerse !== 0 &&
      textInput[props.currentVerse - 1].scrollIntoView({ block: 'center', behavior: 'smooth', inline: 'center' });

    // scrollIntoView({ block: 'center', behavior: 'smooth', inline: 'center' });

  });
 ...
 
<div
                key={ index }
                ref={ setTextInputRef }
           >