DEV Community

Cover image for Pokemon API using ReactJs
isurojit
isurojit

Posted on

Pokemon API using ReactJs

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;
Enter fullscreen mode Exit fullscreen mode

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>
);
Enter fullscreen mode Exit fullscreen mode

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}
    />
);
Enter fullscreen mode Exit fullscreen mode

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>
);

Enter fullscreen mode Exit fullscreen mode

Use your own style using the class names on components. Any suggestion on improving this little project will be appreciated.
Ping for full code.

Discussion (9)

Collapse
migueldevelopez profile image
MiguelDevelopez

Put js when you introduce a code to print it properly

import React from 'react';
import './search-box.styles.css';

export const SearchBox = ({placeholder, handleChange}) =>(
    <input   />
);
Enter fullscreen mode Exit fullscreen mode

And about the code, you should investigate the react hooks, you will love it

Collapse
isurojit profile image
isurojit Author

Thank you for your much-needed valuable suggestions. I am onto it, sir.

Collapse
dastasoft profile image
dastasoft • Edited on

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! :)

Collapse
isurojit profile image
isurojit Author

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?

Collapse
dastasoft profile image
dastasoft

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 :)

Collapse
qsrahman profile image
Sami ur Rahman

If the constructor is only used for initializing state, it can be removed completely. use

class App extends Component{
    state = {
      pokemons: [],
      search: ''
    }
  }
...
Enter fullscreen mode Exit fullscreen mode
Collapse
isurojit profile image
isurojit Author

Yes sir, Understood. I will implement as you have instructed. Thank you for your valuable suggestion.

Collapse
marvinschopf profile image
Marvin

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.

Collapse
isurojit profile image
isurojit Author

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.