How to export state in useState hook and use it in other components-CodePudding

So I creating a movie-db app and I want to toggle between different categories like Top Rated,Popular etc.I am trying to do this by setting the state to be the text value of whatever clicked which will be used later on to form the complete url to be fetched.

This is my code:

App.js

import Movie from "./components/Movie";
import requests from "./components/ApiRequest";
import Navbar from "./components/Navbar";

function App() {

  return (
    <div className="App">
      <Navbar />
      <div className="movie-container">
        <Movie fetchUrl={requests.fetchTrending} />
      </div>
        
    </div>
  );
}

export default App;

Navbar.js

import React, { useState } from 'react'
import SearchBar from './SearchBar'
import { FiFilter } from 'react-icons/fi'
import requests from "../components/ApiRequest";


const Navbar = () => {
    const [category, setCategory] = useState('Trending')

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

So I want to get the value of category from Navbar.js outside the function and use it here <Movie fetchUrl={requests.fetch{category} /> so that I can fetch that url from requests

CodePudding user response：

You should lift state up to a common ancestor, i.e. App in this case, where it can be passed down as props to children components.

Example:

function App() {
  const [category, setCategory] = useState('Trending');

  return (
    <div className="App">
      <Navbar setCategory={setCategory}/>
      <div className="movie-container">
        <Movie fetchUrl={requests.fetchTrending(category)} />
      </div>
        
    </div>
  );
}

...

const Navbar = ({ setCategory }) => {
  return (
    <div className="navbar-container">
      <button className="navbar-btn"><FiFilter />Filter</button>
      <div className="categories">
        <button onClick={() => setCategory("Trending")}>Trending</button>
        <button onClick={() => setCategory("Popular")}>Popular</button>
        <button onClick={() => setCategory("TopRated")}>Top Rated</button>
        <button onClick={() => setCategory("Upcoming")}>Upcoming</button>
      </div>
      <SearchBar />
    </div>
  )   
}

CodePudding user response：

You need to lift up your state. It means that your useState 'category' hook have to be in parent component which can pass this data as prop to child. In your case parent component for Movie component is App component so App component have to contain

const [category, setCategory] = useState('Trending')

Now you can pass 'category' prop to Movie component and setCategory to Navbar component