Problem with a fetch search and pagination with React

Question

I'm building a movie project in React and I have created pagination and a searchbar. When I do a search, everything is fine, I have the correct number of pages displayed but when I click on a number to change pages, nothing happens.

Here's Pagination component:

// == Import
import { createTheme, Pagination, ThemeProvider } from '@mui/material';
import PropTypes from 'prop-types';
import { PaginationStyle } from './CustomPaginationStyles';

const theme = createTheme({
    palette: {
        mode: 'dark',
    },
});

// == Composant
const CustomPagination = ({ setPage, numOfPages }) => {

    const handlePageChange = (page) => {
        setPage(page);
        // Scroll qui remonte lors du changement de page
        window.scroll(0, 0);
    };
    
    return (
        <ThemeProvider theme={theme}>
            <PaginationStyle>
                <Pagination
                    count={numOfPages}
                    color="primary"
                    size="large"
                    onChange={(event) => handlePageChange(event.target.textContent)}
                    hideNextButton
                    hidePrevButton
                />
            </PaginationStyle>
        </ThemeProvider>
    );
};
    
CustomPagination.propTypes = {
    setPage: PropTypes.func.isRequired,
    numOfPages: PropTypes.number.isRequired
};

CustomPagination.defaultProps = {
    numOfPages: 20
};

// == Export
export default CustomPagination;

Here's Search component:

// == Import
import { HomeTitle, Container } from '../../Styles/globalStyles';
import SearchIcon from '@mui/icons-material/Search';
import baseUrl from '../../Redux/baseUrl';
import './SearchBar.scss';
import { useEffect, useState } from 'react';
import SingleContent from '../../components/Content/SingleContent';
import CustomPagination from '../../components/CustomPagination/CustomPagination';

// == Composant
const Search = () => {

    const [searchText, setSearchText] = useState('');
    const [page, setPage] = useState(1);
    const [content, setContent] = useState([]);
    const [numOfPages, setNumOfPages] = useState();

    const handleOnChange = (event) => {
        setSearchText(event.target.value);
    };

    const fetchData = async () => {
        try {
            const response = await baseUrl.get(`search/multi?api_key=${process.env.REACT_APP_API_KEY}&language=en-US&query=${searchText}&page=${page}&include_adult=false`);
            console.log(response);
            setContent(response.data.results);
            setPage(response.data.page);
            setNumOfPages(response.data.total_pages);
            setSearchText('');
        } catch (error) {
            console.trace(error);
            
        }
    }; 

    const handleOnSubmit = (event) => {
    // on va tester s'il y a assez de lettre
        if (searchText.length < 3) {
            alert('Veuillez mettre au moins trois caractères');
        }
        else {
            event.preventDefault();
            fetchData();
        }
    };

    useEffect(() => {
    }, [searchText, page]);

    
    return (
        <div>
            <HomeTitle>Search</HomeTitle>
            <div className='search-bar'>
                <form
                    className='search'
                    onSubmit={handleOnSubmit}
                >
                    <input
                        type="text"
                        placeholder="Search"
                        value={searchText}
                        onChange={handleOnChange}
                    />
                    <button type='submit' className='search-icon'><SearchIcon/></button>
                </form>
            </div>
            <Container>
                {content &&
            content.map((searchContent) => (
                <SingleContent
                    key={searchContent.id}
                    id={searchContent.id}
                    poster={searchContent.poster_path}
                    title={searchContent.title || searchContent.name}
                    date={searchContent.first_air_date || searchContent.release_date}
                    media_type={searchContent.media_type}
                    vote_average={searchContent.vote_average}
                />
            ))}
                {searchText && !content && (<h2>No Series Found</h2>)}
            </Container>
            {numOfPages > 1 && (<CustomPagination setPage={setPage} numOfPages={numOfPages} />)}
        </div>
    );};

// == Export
export default Search;

Answer 1

It seems like you would need to make another api call when the page state is changed. I see in the Search component you already have a useEffect hook like so

    useEffect(() => {
}, [searchText, page]);

Try calling your fetchData function in the hook which is already listening to changes on the page value:

useEffect(() => {
    fetchData()
}, [searchText, page]);