Translation: React - TypeScript destructuring assignment of props

Question

I have a function

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

The "data argument" is what I receive from an external source and defining a strong type is not feasible. "return" is derived from "data", so it is also of type any.

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

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

And in the MainCategories component,

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

Translation: It works, no problem.

But I want:

export default function MainCategories( {subjects} ) {

Can anyone help?

Answer 1

You need to add a Props type or interface, and then you can obtain subjects through destructuring.

interface Props {
  subjects: any
}

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

Answer 2

I often use this pattern to achieve this, but the main key is defining the props.

import { FunctionComponent } from 'react';

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

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

export default MainCategories;