Please see this minimum example below:
/** @jsx h */
import { h, FunctionalComponent } from 'preact';
const Test: FunctionalComponent = () => {
return (
<select
value="1"
onChange={(event) => {
console.log(event.target.value);
}}
>
<option value="1">1</option>
<option value="2">2</option>
</select>
);
};
How do I resolve the error where it says Object is possibly 'null'?
This is a "TypeScript safety check" to inform you that event.target may be null, which would cause access to event.target.value to throw an error at run-time.
This warning/error can be silenced by using the "non-null assertion operation":
<select value="1" onChange={(event) => {
/* Add ! after target to state that "event.target!" is defined and
that value field can be safely accessed. This is a non-null
assertion */
console.log(event.target!.value);
}}>
Or by checking that event.target is defined before accessing it:
<select value="1" onChange={(event) => {
const { target } = event;
if(target) {
/* The ! is not needed seeing target is dedeuced as being defined */
console.log(target.value);
}
}}>
target !== null, I still get the "object is possibly 'null'" error.
React.ChangeEvent then you might still get error unless you check for event.target && event.target.value before using.
if (event.target.files)Make sure to check event.target.value before accessing it. See below
<select value="1" onChange={(event) => {
event.target.value? console.log(event.target.value):null;
}}
I had a similar issue when selecting file
<input
type="file"
onChange={(event: React.ChangeEvent<HTMLInputElement>): void => {
formik.setFieldValue(
"file",
(event?.target.files && event?.target?.files[0]) ?? ""
);
formik.setFieldValue(
"fileName",
(event?.target.files && event?.target?.files[0].name) ?? ""
);
}}
/>;
