import { useEffect , useState } from 'react' ; import { Link , useParams } from 'react-router-dom' ; import { Heroes } from './Heroes' ; export function HeroesPagination ( ) { const { page : tmp } = useParams < 'page' > ( ) ; const pageQueryParam = tmp !== undefined ? Number . parseInt ( tmp , 10 ) : 0 ; const [ page , setPage ] = useState ( pageQueryParam ) ; useEffect ( ( ) => { if ( pageQueryParam !== page ) { setPage ( pageQueryParam ) ; } } , [ pageQueryParam , page ] ) ; let prevButtonClasses = 'btn btn-primary' ; if ( page === 0 ) prevButtonClasses += ' disabled' ; return ( < > < h1 > Marvel Heroes < /h1> < Link to = { `/${ page - 1 }` } className = { prevButtonClasses } > ‹ Previous < /Link>{' '} < Link to = { `/${ page + 1 }` } className = "btn btn-primary" > Next › < /Link> < Heroes page = { page } / > < />); }