Suppose I have five pages and I have a common footer containing previous and next button and the flow to show the five pages are fixed and I want the previous button to be used to display the last page and the next button to display the upcoming page.

Below is the code :

Index.js

import React, { Fragment } from 'react';
import ScreenDamage from './ScreenDamage'; //1st screen
import BatteryDamage from './BatteryDamage'; // 2nd screen
import MicDamage from './MicDamage'; // 3rd screen
import ExternalDamage from './ExternalDamage'; // 4th Screen
import Footer from './Footer';
import styles from './manualCheck.module.scss';
import AdditionalChecks from './AdditionalChecks' // 5th screen

const { Wrapper } = Foundations;

const ManualCheck = () => {
  return (
    <Fragment>
      <ScreenDamage /> //1st Screen
      <BatteryDamage /> //2nd Screen
      <MicDamage />  //3rd Screen
      <AdditionalChecks />  //4th Screen
      <ExternalDamage />  //5th Screen
        <div className={styles.footer}>
          <VerticalSpacing />
          <Footer />
        </div>
    </Fragment>
  );
};

export default ManualCheck;

Footer.js

import React from 'react';
import InlineLink from '/InlineLink';
import styles from './manualCheck.module.scss';

const StepLayoutFooter = () => (
  <div className={styles.setupFooter}>
    <div className={styles.previousButton}>
      <InlineLink>
        <a
          href="#"
          onClick={() => {
          }}
        >
          Back
        </a>
      </InlineLink>
    </div>
    <div className={styles.nextButton}>
      <InlineLink>
        <a
          element="a"
          href=""
          onClick={() => {}}
        >
          Next
        </a>
      </InlineLink>
    </div>
  </div>
);

StepLayoutFooter.defaultProps = {
};

export default StepLayoutFooter;