React refs created from Array not working

Question

I'm trying to use refs created from an array but when I check in the Component tab of the React Developper Tools, ref passed to the input are always undefined. Something I missed here?

const MyComponent = () => {
  const refs = useMemo(() => Array(2).fill(0).map(i => React.createRef()), []);

  const TextInput = ({ name, value, inputRef }) => (
    <input
      name={name}
      value={value}
      onChange={updateField()}
      ref={inputRef}
    />
  )

  return (
    <TextInput
      name="lastname"
      value="Nom *"
      inputRef={refs[0]}
    />
    <TextInput
      name="firstname"
      label="Prénom *"
      inputRef={refs[1]}
    />
  )
}

Thanks!

Sorry @JayendraSharan , I don't use i anymore. I updated my sample code. — Tom
– Tom, Commented Sep 17, 2021 at 10:04
What are you attempting to do here? Why not just use two useRefs? — AKX
– AKX, Commented Sep 17, 2021 at 10:05
@AKX I could if I always had a fixed number of TextInput components. But it can occur that the number of components vary and I have to generate refs dynamically in that case. — Tom
– Tom, Commented Sep 17, 2021 at 10:08
That will be easiest done with a function-style ref instead. — AKX
– AKX, Commented Sep 17, 2021 at 10:11

AKX · Accepted Answer · 2021-09-17 10:17:07Z

1

If you have a variable number of refs, you'll want a function-style ref instead, like below.

const TextInput = ({
  name,
  value,
  refs
}) => (
  <input
    name={name}
    value={value}
    ref={(el) => {
      refs.current[name] = el;
    }}
  />
);

const MyComponent = () => {
  const refs = React.useRef({});

  React.useLayoutEffect(() => {
    console.log(refs.current);
  }, []);

  return (
    <>
      <TextInput name="lastname" value="Nom *" refs={refs} />
      <TextInput name="firstname" value="Prénom *" refs={refs} />
    </>
  );
};

This will log

{lastname: HTMLInputElement, firstname: HTMLInputElement}

As an aside: never nest components – that will cause unnecessary rerenders.

answered Sep 17, 2021 at 10:17

AKX

171k16 gold badges147 silver badges229 bronze badges

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

4 Comments

Tom Over a year ago

It doesn't work as I'd like. First, I don't see both refs logged, just the initial value {}. And in my actual code, I try to focus() on refs.current[name], but only one input can be edited at one point(because of unique ref in the refs obj). I would like to focus on both input at the same time. I guess it would work if I'd had the two ref originally created as shown in your "log".

AKX Over a year ago

Only one element can have focus at any given time. You can't have two simultaneously focus()ed elements.

Tom Over a year ago

You're right, sorry for my confused comment. It's just that when the first input has focus, I have to click twice on the second one to set focus on it.

Tom Over a year ago

The focus problem was not related to your pattern. It works now. Thanks, I did know I could pass a callback as ref.

Collectives™ on Stack Overflow

React refs created from Array not working

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related