[SOLVED] Tyepscript Array.map returns array of JSX.Element instead of custom component type

Issue

var items = values.map((x, index) =>
   <CustomComponent key={index} />);

This returns JSX.Element[]. Why doesn’t it return typeof CustomComponent[]?

With the former, then I can’t use items.sort without difficult errors.

Solution

It’s correct. It returns JSX.Element[] because you are rendering CustomComponent immediately.
If you want to work with element sort/filter or something else you need filter data before render.

values
   .filter(x => //filter your values)
   .map((x, index) => // render your components
<CustomComponent key={index} />);

Answered By – Egor

Answer Checked By – Jay B. (BugsFixing Admin)