Рубрики
Без рубрики

Pokemon API с использованием inventjs

Пытался создать небольшой забавный проект, используя inventjs.pokeapi используется для получения данных. Несколько компонентов … Теги от реагирования, JavaScript, HTML, CSS.

Пытался создать небольшой забавный проект, используя inventjs.pokeapi используется для получения данных. Многочисленные компоненты, используемые для запуска состояния. Попробуй- https://bit.ly/3tsw78l Отказ #Api используется из http://pokeapi.co. . Код, данный ниже: – 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(
      

        
Author

        
Pokemon Database

        
        
        

      

    );
  }
}

export default App;

Компонент Cardlist

import React from 'react';

import { Card } from '../card/card.component';

import './card-list.style.css';


export const CardList = props => (
    

        {props.pokemons.map(pokemon =>(
        
        ))}
    

);

Компонент поиска

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

export const SearchBox = ({placeholder, handleChange}) =>(
    
);

Компонент карты

import React from 'react';

import './card.styles.css';

export const Card = props =>(
    
);

Используйте свой собственный стиль, используя названия классов на компонентах. Любое предложение по улучшению этого маленького проекта будет оценена. Ping для полного кода.

Оригинал: “https://dev.to/isurojit/pokemon-api-using-reactjs-4ig5”

Читайте ещё по теме: