InitialVersion1.js

const steps = [
  {
    text: "Step 1: Personal Details",
    display: true,
    url: "personal-info",
    completed: false
  },
  {
    display: true,
    text: "Step 2: Credentials & Education",
    url: "qualifications",
    completed: false
  },
  {
    text: "Step 3: Tutor Profile",
    display: true,
    url: "about-tutor",
    completed: false
  },
  {
    text: "Step 4: Create Subjects",
    display: true,
    url: "",
    completed: false
  }
class HoldingComponent extends React.Component {
  render() {
    const {
      client,
      page,
      navigation,
      PassedControlPage,
      ...props
    } = this.props;
    const ControlPage = !!page.module_path
      ? generateLoadableWithDataComponent(
          () =>
            import(`./views/${
              page.module_path
            }` /* webpackChunkName: "form-steps" */),
          getUserQuery(this.props.email),
          client
        )
      : generateLoadableWithDataComponent(
          () => import("./App.js"),
          getUserQuery(this.props.email),
          client,
          page.module
        );
    console.log(this.props);
    return (
     <Container steps={steps}>
      <ControlPage section={page.current} func={page.func} {...props} />
    </Container>
    );
  }
}
const pages = [
  {
    path: "personal-info",
    module_path: "PersonalInfoPage",
    current: "personal-info"
  },
  {
    path: "location",
    module_path: "LocationPage",
    current: "personal-info"
  },
  {
    path: "qualifications",
    module: "UserQualificationPage",
    current: "qualifications",
    func: qualificationData
  },
  {
    path: "upload-image",
    current: "about-tutor",
    module: "ImageUploadPage",
    func: imageUploadData
  },
  {
    path: "about-tutor",
    current: "about-tutor",
    module: "AboutTutorPage",
    func: aboutTutorData
  },
  {
    path: "pricing",
    current: "about-tutor",
    module: "PricingPage",
    func: pricingData
  }
];
export class Page extends React.Component {
  render() {
    return (
        <Switch>
          {pages.map((page, index) => (
            <Route
              key={index}
              path={`/${page.path}`}
              render={props => {
                return (
                  <HoldingComponent
                    {...{
                      client: this.props.client,
                      page,
                      ...props
                    }}
                  />
                );
              }}
            />
          ))}
        </Switch>
    );
  }
}

export default Page;

proposed-version.js

class HoldingComponent extends React.Component {
render() {
const {
client,
page,
navigation,
PassedControlPage,
...props
} = this.props;
const ControlPage = !!page.module_path
? generateLoadableWithDataComponent(
() =>
import(./views/${ page.module_path } /* webpackChunkName: "form-steps" */),
getUserQuery(this.props.email),
client
)
: generateLoadableWithDataComponent(
() => import("./App.js"),
getUserQuery(this.props.email),
client,
page.module
);
console.log(this.props);
return (

);
}
}
export class Page extends React.Component {
render() {
return (


{pages.map((page, index) => (
<Route
key={index}
path={/${page.path}}
render={props => {
return (
<HoldingComponent
{...{
client: this.props.client,
page,
...props
}}
/>
);
}}
/>
))}


);
}
}

export default Page;