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:
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>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;
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.