button onClick methods not working in react app

Question

This is the react code for a sample homepage. I wanted to make it such that when the buttons are clicked it will run the function and then update the page. But instead it keeps giving the alerts. I've confirmed that the fetch is indeed pulling data from the API but the onClick is the one that isn't working.

import React, { Component } from 'react';
import Grid from '@material-ui/core/Grid';
import Container from '@material-ui/core/Container';
import Movie from './movieoutline/samplemovie';
import './Home.css';
import { Button, ButtonToolbar } from 'react-bootstrap';
import * as FaIcons from 'react-icons/fa';


export class Home extends Component {

    constructor(props) {
        super(props);
        this.state = { movies: [], page:1, maxpage:0 }
    }

    refreshlist() {
        let _page = this.state.page;
        const sort = "popularity.desc";
        const apikey = process.env.REACT_APP_TMDB_APP_KEY;
        const url = "https://api.themoviedb.org/3/discover/movie?api_key=" + apikey + "&language=en-US&sort_by=" + sort + "&include_adult=false&include_video=false&page="+_page+"&with_watch_monetization_types=flatrate";
        fetch(url)
            .then(response => response.json())
            .then(data => {
                this.setState({ movies: data.results, page:data.page, maxpage:data.total_pages});
                console.log(this.state);
            })
    }

    componentDidMount() {
        this.refreshlist();
    }

    componentDidUpdate() {
        this.refreshlist();
    }

    fowardbtn(){
        if(this.state.page == this.state.maxpage ){
            return true;
        } else{
            return false;
        }
    }

    backwardbtn(){
        if(this.state.page == 1 ){
            return true;
        } else{
            return false;
        }
    }

    render() {
        const { movies } = this.state;
        return (
            <Container maxWidth="xl" id="testApp">
                <div className="foward">
                    <Button className='fowardbtn' variant='primary' onClick = {
                        this.fowardbtn() 
                        ? 
                        alert("This is the last page")
                        :
                        this.setState({page: this.state.page+1}), this.refreshlist()
                        }>
                        <FaIcons.FaChevronCircleRight className='movie-icons' />
                    </Button>
                </div>
                <div className="backward">
                    <Button className='backwardbtn' variant='primary' onClick = {
                        this.backwardbtn() 
                        ? 
                        alert("This is the first page")
                        :
                        this.setState({page: this.state.page-1}), this.refreshlist()
                        }>
                        <FaIcons.FaChevronCircleLeft className='movie-icons' />
                    </Button>
                </div>
                <div className='item container-fluid d-flex justify-content-center'>
                    <Grid container spacing={2} direction="row" justifyContent="center" alignItems="center">
                        {movies.map(movie =>
                            <Grid item lg={2} md={3} sm={4} xs={5}>
                                < Movie movie={movie} />
                            </Grid>
                        )}
                    </Grid>
                </div>
            </Container>
        );
    }
}

Edit:

When I remove the alert code it gives an Unhandled Rejection error, saying that a component called the setState method too often.

Answer 1

Replace your button with below and check

<Button className='backwardbtn' variant='primary' 
     onClick = {() => {
       this.backwardbtn() ? 
       alert("This is the first page") :
       this.setState({page: this.state.page-1});
       this.refreshlist();
     }}>
  <FaIcons.FaChevronCircleLeft className='movie-icons' />
</Button>

Answer 2

Please try this.

import React, { Component } from 'react';
import Grid from '@material-ui/core/Grid';
import Container from '@material-ui/core/Container';
import Movie from './movieoutline/samplemovie';
import './Home.css';
import { Button, ButtonToolbar } from 'react-bootstrap';
import * as FaIcons from 'react-icons/fa';


export class Home extends Component {

    constructor(props) {
        super(props);
        this.state = { movies: [], page:1, maxpage:0 }
    }

    refreshlist() {
        let _page = this.state.page;
        const sort = "popularity.desc";
        const apikey = process.env.REACT_APP_TMDB_APP_KEY;
        const url = "https://api.themoviedb.org/3/discover/movie?api_key=" + apikey + "&language=en-US&sort_by=" + sort + "&include_adult=false&include_video=false&page="+_page+"&with_watch_monetization_types=flatrate";
        fetch(url)
            .then(response => response.json())
            .then(data => {
                this.setState({ movies: data.results, page:data.page, maxpage:data.total_pages});
                console.log(this.state);
            })
    }

    componentDidMount() {
        this.refreshlist();
    }

    componentDidUpdate() {
        this.refreshlist();
    }

    fowardbtn(){
        if(this.state.page == this.state.maxpage ){
            return true;
        } else{
            return false;
        }
    }

    backwardbtn(){
        if(this.state.page == 1 ){
            return true;
        } else{
            return false;
        }
    }

    render() {
        const { movies } = this.state;
        return (
            <Container maxWidth="xl" id="testApp">
                <div className="foward">
                    <Button className='fowardbtn' variant='primary' onClick = {
                        this.fowardbtn() 
                        ? 
                        () => alert("This is the last page")
                        :
                        () => {
                            this.setState({page: this.state.page+1}); 
                             this.refreshlist();
                             }
                        }>
                        <FaIcons.FaChevronCircleRight className='movie-icons' />
                    </Button>
                </div>
                <div className="backward">
                    <Button className='backwardbtn' variant='primary' onClick = {
                        this.backwardbtn() 
                        ? 
                        () => alert("This is the last page")
                        :
                        () => {
                            this.setState({page: this.state.page-1}); 
                             this.refreshlist();
                             }
                        }>
                        <FaIcons.FaChevronCircleLeft className='movie-icons' />
                    </Button>
                </div>
                <div className='item container-fluid d-flex justify-content-center'>
                    <Grid container spacing={2} direction="row" justifyContent="center" alignItems="center">
                        {movies.map(movie =>
                            <Grid item lg={2} md={3} sm={4} xs={5}>
                                < Movie movie={movie} />
                            </Grid>
                        )}
                    </Grid>
                </div>
            </Container>
        );
    }
}