So I want to toggle between different categories in my react movie-app such as Trending,Top Rated,Popular etc.I am use useState hook for this,by making the initial state as one category then changing the state through the onClick event on the buttons.But it doesn’t seem to be working.What could be the problem?

Code:

App.js

import { useState } from "react";
import Movie from "./components/Movie";
import requests from "./components/ApiRequest";
import Navbar from "./components/Navbar";

function App() {
  const [category, setCategory] = useState('top_rated')
  
  return (
    <div className="App">
      <Navbar setCategory={setCategory} />
      <div className="movie-container">
        <Movie fetchUrl={"movie/" + category + "?api_key=" + API_KEY + "&language=en-US&page=1"} />
      </div> 
        
    </div>
  );
}

export default App;

Navbar.js

import React from 'react'
import SearchBar from './SearchBar'
import { FiFilter } from 'react-icons/fi'

const Navbar = ({ setCategory }) => {

    return (
        <div className="navbar-container">
            <button className="navbar-btn"><FiFilter />Filter</button>
            <div className="categories">
                <button className="cat-btn" onClick={() => setCategory("popular")}>Popular</button>
                <button className="cat-btn" onClick={() => setCategory("top_rated")}>Top Rated</button>
                <button className="cat-btn" onClick={() => setCategory("upcoming")}>Upcoming</button>
            </div>
            <SearchBar />
        </div>
    )   
}


export default Navbar

Movie.js

const Movie = ({ fetchUrl }) => {

    const [movie, setMovie] = useState([]);

    useEffect(() => {
        async function getPost() {
            const response = await client.get(fetchUrl);
            console.log(response);
            setMovie(response.data.results);
            // return response;
          }
          getPost();
    }, [])

    return (
    movie.map((m) => (
            <div className="movie-component" key={m.id}>    
                <img src={`https://image.tmdb.org/t/p/w500${m.backdrop_path}`} alt="" />
                <div className="metadata">
                    <h1>{m.title}</h1>
                    <a>⭐{m.vote_average}</a>
                </div>
                
            </div>
        )
))

}

So I have initialized the useState hook in App.js and then using it in Navbar.js as the set the state of this hook on click event.

>Solution :

useEffect(() => {
    async function getPost() {
        const response = await client.get(fetchUrl);
        console.log(response);
        setMovie(response.data.results);
        // return response;
      }
      getPost();
}, [fetchURL])

please update your dependency array as follows.

on changing the category, fetchURL value is being changed.
so it need to be included in dependency array of useEffect Hook.