Typescript React useRef object possibly null (Uncontrolled Component)

Question

I'm trying to use a ref to an input element, and then use inputRef.current.value to get its value but I'm getting an error Object is possibly 'null'.ts(2531) at inputRef.current.

I tried several different solutions but I haven't got it to work yet. Any help is appreciated.

interface RefObject<T> {
    readonly current: T | null
  }
  
const Uncontrolled: React.FC = () => {
    // const inputRef = useRef< HTMLInputElement | null> (null);
    const inputRef:RefObject<HTMLInputElement> = useRef< HTMLInputElement | null> (null);
    
    function alertValue() {
        alert(inputRef.current.value);         //Object is possibly 'null', under inputRef.current
    }

    return (
        <div>
            <p> Uncontrolled components do not have state data</p>
            <input type="text" ref={inputRef} />
            <button onClick={alertValue}>Click Me</button>
        </div>
    )
}

my solutions came from:

useRef TypeScript - not assignable to type LegacyRef<HTMLDivElement>

Object is possibly null in TypeScript React

CertainPerformance · Accepted Answer · 2021-11-23 00:11:46Z

1

While you could use optional chaining or ! to assert that the .current property isn't nullish...

alert(inputRef.current!.value);

a better way would be to make the input controlled and log the state instead.

const [value, setValue] = useState('');
function alertValue() {
    alert(value);
}
// ...
<input value={value} onchange={e => { setValue(e.currentTarget.value); }} />

answered Nov 23, 2021 at 0:11

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sujio Over a year ago

Thanks, the ! worked, I'll look into optional chaining too. for this component I'm trying to make it uncontrolled on purpose hence the component name. I'll accept answer in 8 mins

Collectives™ on Stack Overflow

Typescript React useRef object possibly null (Uncontrolled Component)

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related