Array Mapping Issue

[hollow snow]

I have the following Skills component (attached as picture too, as unclear on how to format code here):

---import SectionTitle from "@components/SectionTitle.astro";import SkillItem from "@components/SkillItem.astro";import InfiniteLoopSlider from "@components/InfiniteLoopSlider.astro";import { shuffle, reverse } from "@src/utils.js"; import site from "@data/site"; // const SKILLS = pluck(site.skills, "name"); const SKILLS: string[] = [  "Wireframing",  "User Testing",  "Ideation",  "User Flow",  "Micro-Interactions",  "Prototyping",  "CSS & HTML",  "Animation",  "TailwindCSS",  "Storybook",  "Design Systems",  "User-Centric Design",  "Research",  "Informational Architecture",  "Strategy & Design",  "Mobile App & Web Design",  "Accessibility",  "Usability Studies",  "User Interface Development",  "User Experience Design",]; const ROWS: number = 4;const SKILLS_PER_ROW: number = 6;--- <section class="pt-[26rem]">  <SectionTitle title="SKILLS" />  <div    class="pt-40 relative flex flex-col shrink-0 gap-[1rem_0] max-w-[90vw] w-[40rem] p-[1.5rem_0] overflow-hidden"  >    {      [...new Array(ROWS)].map((row, i) => {        <InfiniteLoopSlider reverse={i % 2 === 0}>          {shuffle(SKILLS)            .slice(0, SKILLS_PER_ROW)            .map((skill) => (              <SkillItem skill={skill} />            ))}        </InfiniteLoopSlider>;      })    }  </div></section>

The issue i'm having is that when trying to render the SkillItem component, typescript shows an error of: Type 'unknown' is not assignable to type 'string' on <SkillItem skill={skill} />, which, as I understand, the mapping actually fails (skill is null/unknown).

Do I need to do this mapping on the frontmatter (if so, how would I do so?), or is there something obvious i'm missing here?

Thanks for any assistance!

[patent delta]

I’m guessing some of your functions don’t pass on that SKILLS is a string[] for some reason. Hard to know without seeing the full code exactly why, but you should be able to make the editor warning go away like

<SkillItem skill={skill as string} />

Basically you’re telling TypeScript “No, skill is not unknown, I know it’s a string”

[hollow snow]

Unfortunately that didnt fix the issue. I tried to display the skill without calling the SkillItem component they way you described but nothing shows. Please let me know if theres anything else I can provide to help. Thanks!

[patent delta]

Oh, one important thing! your map function doesn’t return anything, should be return shuffle(SKILLS) etc.