Supongamos que tengo cinco páginas y tengo un pie de página común que contiene el botón anterior y siguiente y el flujo para mostrar las cinco páginas está arreglado y quiero que el botón anterior se use para mostrar la última página y el botón siguiente para mostrar la página siguiente.

A continuación se muestra el código:

Índice.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;

Pie de página.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;