How to access props in react functional component using react and typescript?

Question

i have a MainComponent and ChildComponent and pass isOpen prop from MainComponent to ChildComponent.

Below is the code,

function MainComponent () {
   return (
       <Route
        path="items"
        render={routeProps => (
          <Layout>
              <ChildComponent
                  isOpen={isOpen}// passing prop here
                {...routeProps}
              />
          </Layout>
        )}
      />
  )

}

type Props = RouteComponentProps<{ first: string, second: string }>;

function SchedulePage({ match }: Props) { //how can i access it here
    const { first } = match.params;
}

I have tried something like below

type Props = RouteComponentProps<{ first: string; second: string, isOpen: boolean }>;

function ChildComponent({ isOpen, match }: Props) {
    const { first } = match.params;
}

But this doesnt seem to be correct. any ideas on how to fix this. thanks.

subashMahapatra · Accepted Answer · 2020-05-22 12:30:20Z

2

You have to extend the RouteComponentProps to pass other props to the component. RouteComponentProps will only take the type argument for params, static-context, and location-state.

Here is how you do it.

interface IParams {
   first: string;
   second: string;
}

interface Props extends RouteComponentProps<IParams> {
   isOpen: boolean;
}

function SchedulePage({ match, isOpen }: Props) { // this is how you access your props
    const { first, second } = match.params;
}

If you want to use React.FC generic this is how to do it.

const SchedulePage: React.FC<Props> = ({ match, isOpen }) => {
  const { first, second } = match.params;
};

Let me know if it helped or if you encountered any error.

answered May 22, 2020 at 12:30

subashMahapatra

6,8772 gold badges23 silver badges27 bronze badges

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

Collectives™ on Stack Overflow

How to access props in react functional component using react and typescript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related