CODEWITHSUNDEEP
javascriptreactjs
ReturnMack
ReturnMack

Reputation: 25

Filtering API data and rendering items upon a button click

Suppose I fetch data from an API that returns an array of objects each representing a movie, similar to this:

[{ "name": "The Matrix", "img": "http://...", "description": "Lorem ipsum...", "first_aired": "1999" }, ...]

What I want is:

  1. Render all movies as cards on initial loading of the app
  2. Have a button that, upon clicking it, would filter and only show those movies that are aired before year 2013.

Pasting below what I've implemented so far, but I'm wondering if there is a more elegant way of doing it. I.e. instead of the ternary operator, is there a way of simply having <CardList items={movies} /> and passing either ALL movies or FILTERED (a subset) movies, as props, depending if the button is toggled or not.

I tried doing that inside the handleToggle handler with if (toggle) {} type of logic that worked up to a point that clicking the button would filter and thus render all movies aired before 2013 but clicking it again wouldn't update the movies state variable back to ALL movies and render them, accordingly.

Inside the CardList component there's also a Card component, if that helps. And inside the CardList component I'm using the map function to iterate over the movies/filteredMovies props to render the Card component(s).

function App() {
   const [movies, setMovies] = useState([]);
   const [toggle, setToggle] = useState(true);
 
   useEffect(() => {
     const getData = fetch('https://api.com/movies')
     .then(data => data.json())
     .then(items => setMovies(items))
   }, [])

const filteredMovies = movies.filter(item => item.first_aired <= 2013);

const handleToggle = () => setToggle(!toggle)

  return (
    <div className="App">
      <button onClick={handleToggle}>{toggle ? "Only show movies aired ≤ 2013" : "Show all movies"}</button>
      {toggle ? <CardList items={movies} /> : <CardList items={filteredMovies} />}
    </div>
  );
}

export default App;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Upvotes: 0

Views: 1015

Answers (2)

VladSofronov
VladSofronov

Reputation: 106

You actually defeating the idea of React here😛. React way would be replace

{toggle ? <CardList items={movies} /> : <CardList items={filteredMovies} />}

with just <CardList items={filteredMovies} /> where filteredMovies is a hook and then just mutate filteredMovies with setFiteredMovies(). React will update the UI automatically.

Upvotes: 1

Hans Murangaza DRCongo
Hans Murangaza DRCongo

Reputation: 860

function App() {
   const [movies, setMovies] = useState([]);
   const [moviesBackup, setMoviesBackup] = useState([]);
   const [toggle, setToggle] = useState(true);
 
   useEffect(() => {
     const getData = fetch('https://api.com/movies')
     .then(data => data.json())
     .then(items => {setMovies(items), setMoviesBackup(items)})
   }, [])

const filteredMovies = movies.filter(item => item.first_aired <= 2013);

const handleToggle = () => {
  setToggle(!toggle);
  //Permit this condition if i am wrong according to button state
  if(toggle === true){
    setMovies(filteredMovies)
  }else{
    setMovies(moviesBackup)
  }
  }

  return (
    <div className="App">
      <button onClick={handleToggle}>{toggle ? "Only show movies aired ≤ 2013" : "Show all movies"}</button>
        <CardList items={movies} />}
    </div>
  );
}

export default App;

Upvotes: 1

Related Questions