React - TypeScript destructuring of props

Question

I have a function:

 export function getSubjectsForStudent(data: any) : any[]

"data argument" I receive from external source and it's not feasible to define strong type. "return" is derived from "data" so it's of type any as well.

A "Main" component passes "return" to a "child" component like this:

<MainCategories subjects={getSubjectsForStudent(data)} />

And in MainCategories

export default function MainCategories(props: any) {
    const tmp = props.subjects;
    ...

It works and it's Ok.

But I want
export default function MainCategories( {subjects} ) {

Can anybody help with it?

Denis Tsoi · Accepted Answer · 2020-09-17 09:23:01Z

12

You need to add a type/interface of Props - Then you'll be able to get subjects by destructuring.

interface Props {
  subjects: any
}

export default function MainCategories({ subjects }: Props) {
    const tmp = props.subjects;
    ...

answered Sep 17, 2020 at 9:23

Denis Tsoi

10.6k8 gold badges42 silver badges61 bronze badges

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

Comments

user12227700 · Accepted Answer · 2020-09-17 09:28:23Z

11

I often use this pattern to do that, but the main point is to define the props.

import { FunctionComponent } from 'react';

interface Props {
  // In your case
  subjects: any
}

const MainCategories: FunctionComponent<Props> = ({subjects}) => (
  ...
);

export default MainCategories;

answered Sep 17, 2020 at 9:28

user12227700

1 Comment

Robert Koritnik Over a year ago

This looks nice but what if you have several members defined on the Props and then you duplicate the same names in the destructuring object of the function parameters? You'd end up with code duplication...

rodrigocfd · Accepted Answer · 2023-11-20 01:21:01Z

2

All other answers use an external interface declaration, which is a good practice. But for everyone looking for an one-liner destructuring, here it goes:

function Foo({name}: {name: string}) {
    return <div>{name}</div>;
}

answered Nov 20, 2023 at 1:21

rodrigocfd

8,3899 gold badges48 silver badges87 bronze badges

Collectives™ on Stack Overflow

React - TypeScript destructuring of props

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related