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;
Please define ref at start function
const inputRef = useRef(null);
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;