Getting TypeError when I'm passing a Ref from a function component to other function component using forwardRef in react js,

user_13915110 0
Viewed 362

I want to pass the ref from the App to Foo, App and Foo are function components, so I'm using forwardRef() to warp the Foo, but I get the error warning TypeError: Cannot add property current, object is not extensible. Below id my code, we do I need to change?

import './App.css';
import React, { useState, Component, useEffect, createRef, useRef, forwardRef } from 'react'
import ReactDOM from 'react-dom'

const Foo=forwardRef((inputRef)=> {
  const onClick = () => {
    inputRef.current.focus()
  }
    return (
      <div>
        <input type="text" ref={ inputRef }></input>
        <button onClick={ onClick }>Focus</button>
      </div>
    ) 
})
function App() {
  const inputRef = createRef()
  const clicked = () => {
    inputRef.current.focus()
  }
  return (
    <div>
      <Foo ref={inputRef} />
      <button onClick={ clicked }>Click Foo</button>
    </div>
  )
  
}
export default App;
react-native react-hooks reactjs frontend javascript
2 Answers

Please define ref at start function

const inputRef = useRef(null);
user_95028610

Ref Forwarding receives two parameters props and ref.

React.forwardRef((props, ref) =>{
    return(
        <button ref={ref}>{props.children}</button>
    )
};

Here is your edited code I've added type for ref which is HTMLInputElement.

type RefType = HTMLInputElement | null;
interface PropsType {}

const Foo = forwardRef<RefType, PropsType>((props, ref) => {
  const onClick = () => {
   if (ref && "current" in ref) {
    ref.current?.focus();
   }
};
  return (
     <div>
       <input type="text" ref={ref}></input>
       <button onClick={onClick}>Focus</button>
     </div>
 );
});

 function App() {
  const inputRef = createRef<HTMLInputElement>();
  const clicked = () => {
  inputRef.current?.focus();
 };
  return (
     <div>
     <Foo ref={inputRef} />
     <button onClick={clicked}>Click Foo</button>
    </div>
   );
  }
 export default App;
user_163351360
Related