This is the example in React's website:

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

How can I do the same with function(){}? I want to do this because I want to avoid create an anonymous function to help with debugging.

This is the example in React's website:

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

How can I do the same with function(){}? I want to do this because I want to avoid create an anonymous function to help with debugging.

• javascript
• reactjs

• 1 Just declare your function like you normally would and pass it to forwardRef instead of the inline arrow function. – ray Commented Nov 5, 2020 at 4:11

2 Answers 2

You could pass a React functional ponent to the argument of React.forwardRef

function Button(props, ref) {
  return (
     <button ref={ref} className="FancyButton">
       {props.children}
     </button>
  )
}

const FancyButton = React.forwardRef(Button);

You could also do something like this.

const FancyButton = React.forwardRef(function FancyButton(props, ref) {
  const {children} = props
  return (
    <button ref={ref} className="FancyButton">
      {children}
    </button>
  )
})
export default FancyButton