Tried to create a little fun project using reactjs.pokeapi is used to fetch data. Multiple components used to trigger the state. Try it- https://bit.ly/3tsW78L. #API used from http://pokeapi.co.
Code given bellow:-
App.js
import React, {Component} from 'react';
import { CardList } from './components/card-list/card-list.component';
import { SearchBox } from './components/search-box/search-box.component';
import { NavigationBtn } from './components/page-navigation/back-to-top';
import './App.css';
class App extends Component{
constructor(){
super();
this.state = {
pokemons: [],
search:''
};
}
componentDidMount(){
fetch('https://pokeapi.co/api/v2/pokemon?limit=500')
.then(response => response.json())
.then(name => this.setState({pokemons:name.results}));
}
handleChange=(e) => {
this.setState({search: e.target.value});
};
render(){
const {pokemons, search } = this.state;
const fileteredPokemons = pokemons.filter(pokemon => pokemon.name.toLowerCase().includes(search.toLowerCase()));
return(
<div className="App">
<h4><a href="https://www.linkedin.com/in/surojit-manna" target="_blank" noreferrer>Author</a></h4>
<h1>Pokemon Database</h1>
<SearchBox
placeholder='Search Pokemon'
handleChange= {this.handleChange}
/>
<NavigationBtn/>
<CardList pokemons={fileteredPokemons}></CardList>
</div>
);
}
}
export default App;
CardList component
import React from 'react';
import { Card } from '../card/card.component';
import './card-list.style.css';
export const CardList = props => (
<div className='card-list'>
{props.pokemons.map(pokemon =>(
<Card key={pokemon.name} pokemon={pokemon}></Card>
))}
</div>
);
SearchBox component
import React from 'react';
import './search-box.styles.css';
export const SearchBox = ({placeholder, handleChange}) =>(
<input
className='search'
type='search'
placeholder={placeholder}
onChange={handleChange}
/>
);
Card component
import React from 'react';
import './card.styles.css';
export const Card = props =>(
<div className="card-continer">
<a href={`https://www.pokemon.com/us/pokedex/${props.pokemon.name}`} target="_blank" rel="noreferrer">
<img alt="pokemon" src={`https://img.pokemondb.net/artwork/large/${props.pokemon.name}.jpg`}/>
<h2>{props.pokemon.name[0].toUpperCase()+props.pokemon.name.slice(1)}</h2>
</a>
</div>
);
Use your own style using the class names on components. Any suggestion on improving this little project will be appreciated.
Ping for full code.
Oldest comments (13)
Check react-query and try to implement an infinite scroll instead of loading the first 500, I'm sure you will find it interesting.
It's a cool project to start and you already built a nice playground to test a lot of nice stuff there so keep it up! :)
Thank you, sir, for your warm appreciation. It will boost up my morale to do much more & I will try to implement an infinite scroll. Actually, I am trying to use material UI for pagination. There will be 100 pokemon on every page. I don't know will it look good or not. Any suggestions sir?
If you really want to try MaterialUI go ahead but, I found it easier (specially if it's your first UI implementation) chakra-ui.com/
For the number of pokemons per page, when you play with the inifinite scroll you'll find out what fits or doesn't fit there :)
mind sharing how you implemented the infinite scroll feature?
You can view an implementation of a infinite scroll in this side project or do you need something specific with react-query and infinite scroll? If that is the case as far as I can remember official docs had an example about that.
Put
js
when you introduce a code to print it properlyAnd about the code, you should investigate the react hooks, you will love it
Thank you for your much-needed valuable suggestions. I am onto it, sir.
I think the project is great! Just one small question: Would it be possible to leave the cursor as an optional alternative? For my part, I find it rather obstructive on a website.
I made it for fun. I think I can use js to trigger an event where there will be an option on double click to make cursor default or I can show an option or fixed button where the event will be triggered to make the cursor default. Please give me your valuable suggestion sir on which option I should opt for.
If the constructor is only used for initializing state, it can be removed completely. use
Yes sir, Understood. I will implement as you have instructed. Thank you for your valuable suggestion.
hola, como me puedo descargar todo el codigo completo?
can i have the full source code pls was wondering how u styled the cards