Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I use multiple refs for an array of elements with hooks?

As far as I understood I can use refs for a single element like this:

const { useRef, useState, useEffect } = React;    const App = () => {    const elRef = useRef();    const [elWidth, setElWidth] = useState();      useEffect(() => {      setElWidth(elRef.current.offsetWidth);    }, []);      return (      <div>        <div ref={elRef} style={{ width: "100px" }}>          Width is: {elWidth}        </div>      </div>    );  };    ReactDOM.render(    <App />,    document.getElementById("root")  );
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>  <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>    <div id="root"></div>

How can I implement this for an array of elements? Obviously not like that: (I knew it even I did not try it:)

const { useRef, useState, useEffect } = React;    const App = () => {    const elRef = useRef();    const [elWidth, setElWidth] = useState();      useEffect(() => {      setElWidth(elRef.current.offsetWidth);    }, []);      return (      <div>        {[1, 2, 3].map(el => (          <div ref={elRef} style={{ width: `${el * 100}px` }}>            Width is: {elWidth}          </div>        ))}      </div>    );  };    ReactDOM.render(    <App />,    document.getElementById("root")  );
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>  <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>    <div id="root"></div>

I have seen this and hence this. But, I'm still confused about how to implement that suggestion for this simple case.

like image 855
devserkan Avatar asked Feb 11 '19 15:02

devserkan


People also ask

How do you pass multiple refs?

To forward multiple refs with React, we can pass in the refs in an object. We have the Child component that accepts refs since we created it by calling forwardRef with the component function. In the function, we destructure the refs we pass in by using: const { ref1, ref2 } = ref.

Can we use multiple useRef in React?

In this article, you'll also learn how to copy text inside multiple input fields in React using useRef. I needed to create multiple readonly input fields in a React component that a user can then click a button to select copy the text inside that input field. It took me a couple of hours to figure it out.

How do you use refs in hooks?

In order to work with refs in React you need to first initialize a ref which is what the useRef hook is for. This hook is very straightforward, and takes an initial value as the only argument. This hook then returns a ref for you to work with.


2 Answers

As you cannot use hooks inside loops, here is a solution in order to make it work when the array changes over the time.

I suppose the array comes from the props :

const App = props => {     const itemsRef = useRef([]);     // you can access the elements with itemsRef.current[n]      useEffect(() => {        itemsRef.current = itemsRef.current.slice(0, props.items.length);     }, [props.items]);      return props.items.map((item, i) => (       <div            key={i}            ref={el => itemsRef.current[i] = el}            style={{ width: `${(i + 1) * 100}px` }}>         ...       </div>     )); } 
like image 96
Olivier Boissé Avatar answered Oct 02 '22 19:10

Olivier Boissé


A ref is initially just { current: null } object. useRef keeps the reference to this object between component renders. current value is primarily intended for component refs but can hold anything.

There should be an array of refs at some point. In case the array length may vary between renders, an array should scale accordingly:

const arrLength = arr.length; const [elRefs, setElRefs] = React.useState([]);  React.useEffect(() => {   // add or remove refs   setElRefs((elRefs) =>     Array(arrLength)       .fill()       .map((_, i) => elRefs[i] || createRef()),   ); }, [arrLength]);  return (   <div>     {arr.map((el, i) => (       <div ref={elRefs[i]} style={...}>         ...       </div>     ))}   </div> ); 

This piece of code can be optimized by unwrapping useEffect and replacing useState with useRef but it should be noted that doing side effects in render function is generally considered a bad practice:

const arrLength = arr.length; const elRefs = React.useRef([]);  if (elRefs.current.length !== arrLength) {   // add or remove refs   elRefs.current = Array(arrLength)     .fill()     .map((_, i) => elRefs.current[i] || createRef()); }  return (   <div>     {arr.map((el, i) => (       <div ref={elRefs.current[i]} style={...}>         ...       </div>     ))}   </div> ); 
like image 29
Estus Flask Avatar answered Oct 02 '22 18:10

Estus Flask