CODEWITHSUNDEEP
javascriptreactjstypescriptreact-props
Singh
Singh

Reputation: 207

How to pass props in a component Reactjs

My component: 

interface Props extends RouteComponentProps<any> {
      sample: {
        info: SampleInfo;
      };
    }
    export class Step extends Component<Props, State>{
    render() {
        const { title } = this.props.sample.info;
        return (
           <TextContent >
              <Title headingLevel="h1" size="3xl">
               Uploading and validating your swagger : {name}  // name is available under sample.info 
              </Title>
            </TextContent>
    )}
    }

When I am trying to access props, I am getting this.props.sample is undefined.

I am trying to call this Step Component in a wizard:

const steps = [
      {
        id: 1,
        name: "show",
        component: <Form />,
      },
      {
        id: 2,
        name: "Listing",
        component: <Sample2 />,
      },

      { name: "Save", component: <Step/>}, // I am calling my Step component from here
    ];

Do I need to pass anything in Step component, please help me with this. I am new to reactjs

Upvotes: 0

Views: 123

Answers (2)

deadcoder0904
deadcoder0904

Reputation: 8683

You <Step/> component must actually have props.

It must pass something like <Step sample={{ info: { title: 'whatever' } }}/> then it'll work.

Upvotes: 1

Sebastian B.
Sebastian B.

Reputation: 2191

RouteComponentProps from react-router is defined as:

export interface RouteComponentProps<
    Params extends { [K in keyof Params]?: string } = {},
    C extends StaticContext = StaticContext,
    S = H.LocationState
> {
    history: H.History<S>;
    location: H.Location<S>;
    match: match<Params>;
    staticContext?: C;
}

(Source: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-router/index.d.ts#L70)

Due to extends { [K in keyof Params]?: string } and you specifying Params generic as any (via RouteComponentProps<any>), K may be any key and because of the ? the value for all keys may be undefined.

I do not use react-router but I think you have to specify RouteComponentProps using appropriate values fot the generic parameters.

Upvotes: 0

Related Questions