How to provide a ref to a child element

Question

I have two functions:

export default function Example() {
  return (
    <Widget>
      <img src="/hello" />
    </Widget>
  )
}

export default function Widget() {
  const ref = useRef(null)
  return (
    <div>
      {children}
    </div>
  )
}

How do I apply 'ref' to the image element of Example? Is there a way to always apply it to the first child element?

That: a) Seems to require some changes to the child element, is there a way to do it without? And b) Seems to require me to instantiate the child element I'm passing the ref to, which I can't in this example. @TusharGupta-curioustushar — Alexander Craggs, Mar 27 '21 at 00:10

score 1 · Accepted Answer · answered Mar 27 '21 at 01:15

you can use cloneElement which helps us to clone and return a new React element using an element as the starting point. by this, we can add ref to element props, first, we made an array of childrens, then add our ref to the first one, e.g:

function Wrapper({ children }) {
  const testRef = React.useRef(undefined);

  const addReftoFirstChild = (chilrens, ref) => {
    let elements = React.Children.toArray(chilrens);

    return [React.cloneElement(elements[0], { ref })].concat(elements.slice(1));
  };

  return (
    <>
      {addReftoFirstChild(children, testRef)}

      <button onClick={() => console.log(testRef.current)}>Test Ref!</button>
    </>
  );
}

function App() {
  return (
    <Wrapper>
      <img
        src='https://www.publicdomainpictures.net/pictures/80000/velka/odd-eyed-kitten.jpg'
        width={200}
        height={125}
      />
      <img
        src='https://c.files.bbci.co.uk/12A9B/production/_111434467_gettyimages-1143489763.jpg'
        width={200}
        height={125}
      />
    </Wrapper>
  );
}

score 0 · Answer 2 · answered Mar 27 '21 at 01:41

You can use React's Context.

const MyContext = React.createContext();

function Widget(props) {
  const myRef = useRef(null);
  useEffect(() => {
    myRef.current.focus();
  });
  return (
    <MyContext.Provider value={myRef}>{props.children}</MyContext.Provider>
  );
}

function Example() {
  return (
    <Widget>
      <MyContext.Consumer>
        {(forwardedRef) => <input type="text" ref={forwardedRef} />}
      </MyContext.Consumer>
    </Widget>
  );
}

I created a demo for you: https://codesandbox.io/s/prod-voice-mkrcp

How to provide a ref to a child element

2 Answers2