CODEWITHSUNDEEP
reactjstypescript
stack_user
stack_user

Reputation: 13

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

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.

Upvotes: 1

Views: 1271

Answers (1)

subashMahapatra
subashMahapatra

Reputation: 6837

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.

Upvotes: 2

Related Questions