How to define TypeScript interface for the passed object in props?

Question

Could I get some help please with the definition of an interface for the IconArr.primary property.

I am trying to pass it into PrimarySkills components --> where I have to define interface but without any luck so far.

I do not want to pass the whole object with both primary and secondary icons, so I can have two separate components but with different input data later.

const iconsArr = {
    primary: [
        {
            id: '0',
            imgPath: 'images/techIcons/reactjs.svg',
            name: 'React',
        },
        {
            id: '1',
            imgPath: 'images/techIcons/nextjs.svg',
            name: 'NextJS',
        },
    ],
    secondary: [
        {
            id: '0',
            imgPath: 'images/techIcons/csharp.svg',
            name: 'C#',
        },
        {
            id: '1',
            imgPath: 'images/techIcons/java.svg',
            name: 'Java',
        },
    ],
};

const Skills = (props: Props) => {
    return (
        <div>
            <StyledCaption contentString='SKILLS'>PRIMARY</StyledCaption>
            <PrimarySkills iconsArr={iconsArr.primary} />
        </div>
    );
};

in PrimarySkills Component

interface Props {
    iconsArr: {
        primary: {
            id: string;
            imgPath: string;
            name: string;
        }[];
    };
}

const PrimarySkills = (props: Props) => {
    return (
        <div>
            {props.iconsArr.primary.map((icon) => (
                <img src={icon.imgPath} alt={icon.name} key={icon.id} height='30' />
            ))}
        </div>
    );
};

juliomalves · Accepted Answer · 2022-06-04 22:36:36Z

2

You can create an interface for each item contained in the array (let's say Icon), then use it to properly type the iconsArr prop as an array of that type (Icon[]).

interface Icon {
    id: string;
    imgPath: string;
    name: string;
}

interface Props {
    iconsArr: Icon[]
}

const PrimarySkills = (props: Props) => {
    return (
        <div>
            {props.iconsArr.map((icon) => (
                <img src={icon.imgPath} alt={icon.name} key={icon.id} height='30' />
            ))}
        </div>
    );
};

Note that because you're passing iconsArr.primary to the iconsArr prop, iconsArr will be an array (it won't have the primary property). You should map through it using props.iconsArr.map(...) instead.

edited Jun 4, 2022 at 22:36

answered Jun 4, 2022 at 22:14

juliomalves

51.1k23 gold badges180 silver badges170 bronze badges

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

1 Comment

KarlZ Over a year ago

Great that's what I could not figure out, that primary property is non-existent in the child component, thank you

Collectives™ on Stack Overflow

How to define TypeScript interface for the passed object in props?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related