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;

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.

Comments

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

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

[isurojit]

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

[dastasoft]

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

[isurojit]

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?

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

[Bob shiew]

mind sharing how you implemented the infinite scroll feature?

[dastasoft]

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.

[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: ''
    }
  }
...

[isurojit]

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

[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.

[isurojit]

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.

[anaperezlopez]

hola, como me puedo descargar todo el codigo completo?

[Bob shiew]

can i have the full source code pls was wondering how u styled the cards