React forwardRef: ref and other props

Question

A parent component:

const Parent = (props) => {
  const ref = useRef();

  return <Child ref={ref} />
}

and the child:

const Child = forwardRef((props, ref) => {
  return <button ref={ref} ...>click</button>
})

What if I want to pass more props to Child than just ref?

I've searched documents and tutorials, but found nothing; and by trial-and-error, I guess this would work:

// in parent
<Child onClick={...} prop1={...} prop2={...} ref={ref} />

and then in Child, I can get these props (onClick, prop1, prop2) from props.

Is that all I need to do? By putting ref as the last prop passing to the child?

What if I have more than one button in Child that needs a ref?

Props will receive multiple values you put on child in parent component, follow the first comment :) — Sudhanshu Kumar, Sep 21 '20 at 13:11

score 3 · Accepted Answer · answered Sep 21 '20 at 13:11

// in parent
<Child onClick={...} prop1={...} prop2={...} ref={ref} />

The order is irrelevant. forwardRef extracts the ref prop from the properties and creates a wrapper.

The other props are available in props (the first argument in the forwardRef callback-function)

If you want to use multiple refs you can use the example here.

score 3 · Answer 2 · answered Sep 21 '20 at 13:12

Well, i had followed this approach,

Parent component

const Parent = (props) => {
  const ref = useRef();

  return <Child _ref={ref} />
}

Child component

const Child = forwardRef(({ _ref, prop1, prop2, prop3, ...props }) => {
  return <button ref={_ref} ...>click</button>
})

And it worked

2 Answers2