How to pass props in a component Reactjs

Question

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

Answer 1

You <Step/> component must actually have props.

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