how to resolve typescript error on React app

Question

I can't seem to fix some typescript error I get on my react app.

Code:

const [fetchJobTitlesCall, { data }] = useLazyQuery<Jobtitles, JobtitlesVariables>(JobTitlesQuery)
useEffect(() => {
    fetchJobTitlesCall({ variables: { keyword: 'Dev' } })
}, [fetchJobTitlesCall, data])

return (
            <Autocomplete
              onChange={(event, value) => dispatchJobTitlesFilter(value)}
              multiple
              id="tags-outlined"
              options={data?.jobTitles} // this line throwing error
              getOptionLabel={option => option.name + ` (${option.totalApplicants})`} // this line throwing error
              filterSelectedOptions
              renderInput={params => (
                <TextField
                  {...params}
                  onChange={event => fetchJobTitles(event.target.value)}
                  variant="outlined"
                  label="Search Job Title"
                  placeholder="Search Job Title"
                />
              )}
            />
)

Error:

Type 'Jobtitles_jobTitles | undefined' is not assignable to type 'unknown[]'. Type 'undefined' is not assignable to type 'unknown[]'.

Any idea how to fix this?

I thing application fails to fetch jobTItle or jobTitle is not array type — jobayersozib
– jobayersozib, Commented May 12, 2020 at 14:44

Explosion Pills · Accepted Answer · 2020-05-12 14:43:18Z

1

Without seeing the type definition of Autocomplete it's difficult to tell exactly, but it looks like the options property requires an array (of unknown type). For example:

type Options = unknown[];

This requires it to always be an array, even an empty array. The following code will not work:

let options: Options;
const data = { jobTitles: undefined };
options = data.jobTitles; // same error

You can resolve this by defaulting to an empty array in case jobTitles is not known, for example:

options={data?.jobTitles || []}

This behavior may be undefined, though -- you might have to refer to the Autocomplete library itself to see how to handle this properly.

answered May 12, 2020 at 14:43

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

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

Comments

Teddy Sterne · Accepted Answer · 2020-05-12 14:44:18Z

1

The options property on the Autocomplete component is expecting the prop to be of type unknown[]. You need to handle the case where data?.jobTitles is undefined. You should be able to just default it to an empty array if the value is undefined.

options={data?.jobTitles || []}

answered May 12, 2020 at 14:44

Teddy Sterne

14.3k2 gold badges49 silver badges52 bronze badges

1 Comment

Lulzim Fazlija Over a year ago

thank you this also works, althou the other answer is more explainable!

Collectives™ on Stack Overflow

how to resolve typescript error on React app

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related