Question 246669 in React native Question posted in
The official React Native documentation can be found here.

Traversing an array created using useRef in React Native

I have the following in a react native application:

export default function MyScreen() {

  const componentRefs = useRef([]);

  return (
            <View >
              {myArray.map(
                (wc, index) =>
                  (
                    <MyObject
                      key={index}
                      ref={el => componentRefs.current[index] = el}
                      index={index}
                      // other props
                    />
                  )
              )}
            </View>
  );
}

Each MyObject instance displays a word. I want to add functionality which will, when a button is pressed, highlight each word in turn, and play an audio file with its pronunciation.

In order to do this, I need to store reference to each MyObject instance in the parent MyScreen function, so I can subsequently traverse through all the displayed words.

My initial stab at this is to use useRef to create an array to store the references, as illustrated above.

As an initial test, I have a button handler to check if the references have been saved. This simply loops through each item in componentRefs:

componentRefs.current.forEach((x) => console.log(x));

However, nothing is displayed.
There is also a warning:

Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

What is the best way to store the references in the parent to enable the desired functionality?

Thanks very much

Tags:

2

Answers


  1. 0

    Please try with below Code:

    export default function App() {
  const componentRefs = useRef([]);
  useEffect(() => {
    Object.keys(componentRefs).map((item, i) => console.log(componentRefs[item]))
  }, [componentRefs]);
  return (
    <View>
      {myArray.map(
        (wc, index) =>
          (componentRefs[index] = (
            <MyObject
              key={index}
              index={index}
              // other props
            />
          ))
      )}
    </View>
  );
}
    Login or Signup to reply.
  2. 0

    Use this code example to use useRef inside loop. This is just an example, change components according to you.

    export default function MyScreen() {
  const componentRefs = [];

  useEffect(() => {
    console.log(componentRefs);
  }, [componentRefs]);

  return (
    <div>
      {myArray.map(
        (wc, index) => (
          <MyObject
            key={index}
            index={index}
            componentRefs={componentRefs}
            // other props
          />
        )
      )}
    </div>
  );
}

    const MyObject = ({ index, componentRefs }) => {
  const ref = useRef(null);
  componentRefs[index] = ref;
  return (
    <View ref={ref}>
      children
    </View>
  )
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search