React Hooks useState initial empty array value in typescript

Question

I'm trying to make typescript happy by giving the correct type. But I can't figure out the exact syntax.

export type CategoriesType = {
  id: string;
  title: string;
  url: string;
  courses: CoursesType[];
};

const [singleCategory, setSingleCategory] = useState<CategoriesType>([] as any);

useEffect(() => {
  const categories = Categories;

  for (const category of categories) {
    setSingleCategory(category);
  }
}, [singleCategory]);

return (
  singleCategory.courses !== [] ? ...
)

This code works. But typescript complains about usage of any. I would prefer to avoid using any.

Other tries:

I get error Property 'courses' does not exist on type 'CategoriesType | []'

  const [singleCategory, setSingleCategory] = useState<CategoriesType | []>([]);

Object is possibly 'undefined'.

const [singleCategory, setSingleCategory] = useState<CategoriesType>();

Would const [singleCategory, setSingleCategory] = useState<CategoriesType[]>([]) work for your application? — IcyTv
– IcyTv, Commented Dec 30, 2020 at 14:51
Nope, I would get error Property 'courses' does not exist on type 'CategoriesType[]'. In return statement — Arnas Dičkus
– Arnas Dičkus, Commented Dec 30, 2020 at 14:52
What purpose does the array serve? Is it just a marker that "we don't have a category"? — Nicholas Tower
– Nicholas Tower, Commented Dec 30, 2020 at 14:53
Yes empty array, is initial value. Until Categories are fetched. — Arnas Dičkus
– Arnas Dičkus, Commented Dec 30, 2020 at 14:55

michael · Accepted Answer · 2020-12-30 14:57:39Z

1

Set state like below.

const [singleCategory, setSingleCategory] = useState<CategoriesType[]>([])

Also in your return singleCategory.courses doesn't make any sense because singleCategory is array type not the object type. You should match your types for state definition and usage.

answered Dec 30, 2020 at 14:57

michael

4,1733 gold badges15 silver badges31 bronze badges

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

Collectives™ on Stack Overflow

React Hooks useState initial empty array value in typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related