Using Interfaces as an attribute in TypeScript React

Question

I have a class called Tab which has three props:

• num: string
• desc: string
• parts: Part[]

where Part has this code in Tab.tsx :

interface Part {
    desc: string,
    link: string
}

But when I create a Tab in Menu.tsx (the parent), I am unsure how to define the parts attribute.

<Tab num="1" desc="Description" parts=? />

How do I go about this?

Answer 1

parts is an Array of objects in the shape of { desc: string; link: string; } { desc: string; link: string; } { desc: string; link: string; } .

Pass it this way: [{ desc: "foo", link: "bar" }, { desc: "foo", link: "baz" }] .

Example:

<Tab
 num="1"
 desc="Description"
 parts={[{ desc: "foo", link: "bar" }, { desc: "foo", link: "baz" }]}
/>