I have been working on creating a Pokedex using the pokeapi. The initial implementation is working well, as I am able to fetch and display Pokemon data in a container. Now, my next step is to add a search and filter functionality for the Pokemon. To achieve this, I decided to incorporate MaterialUI and include a searchBar at the top of the application.
The fetched Pokemon data is passed from App.js to my PokemonList component, which then maps the data. My current challenge is connecting the search function with the pokemonData hook in App.js to filter only the desired Pokemon before passing it to PokemonList for mapping. Any guidance on how to accomplish this would be greatly appreciated!
Below is the code snippet for my SearchAppBar component:
const SearchAppBar = () => {
const [search, setSearch] = useState("");
console.log(search)
return (
<Box sx={{ flexGrow: 1 }}>
<AppBar position="static" sx={{ bgcolor: "black"}}>
<Toolbar>
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="open drawer"
sx={{ mr: 2 }}
>
<MenuIcon />
</IconButton>
<Typography
variant="h6"
noWrap
component="div"
sx={{ flexGrow: 1, display: { xs:'none', sm: 'block' } }}
>
<img src={logo} alt="logo" width="150" height="auto" />
</Typography>
<Search>
<SearchIconWrapper>
<SearchIcon />
</SearchIconWrapper>
<StyledInputBase
onChange={(e) => setSearch(e.target.value)}
id='searchbox'
placeholder="Search for Pokémon..."
inputProps={{'aria-label': 'search'}}
/>
</Search>
</Toolbar>
</AppBar>
</Box>
);
}
export default SearchAppBar;