/
vadim_eremin
/
react-homework-1
Обзор
Документация
Войти
/
vadim_eremin
/
react-homework-1
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
develop
src/App.tsx
58 строк
2 KB
Vadim Eremin
first_commit
28 авг 2025, 23:57
28 авг 2025, 23:57
a98cdbd
Код
Авторство
О чём код?
import React, { useEffect, useState } from 'react'; function RickMortyAPI() { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [list, setList] = useState([]); type Character = { id: number; name: string; image: string; species: string; episode: Array<string>; } useEffect(() => { fetch('https://rickandmortyapi.com/api/character') .then((response) => { if (!response.ok) { throw new Error('Загрузка не удалась'); } return response.json(); }) .then((data) => { setList(data.results); setData(data); setLoading(false); }) .catch((error) => { setError(error); setLoading(false); }); }, []); if (loading) return <p>Загрузка...</p>; if (error) return <p>Ошибка</p>; return ( <div> <h1>Персонажи мультсериала Rick and Morty</h1> <div className="p-4"></div> <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4"> {list.map((c: Character) => ( <div className="bg-orange-200 p-6 text-center rounded" key={c.id}> <h3>{c.name}</h3> <img src = {c.image} alt={c.name} /> <p>Описание: {c.species}</p> <p>Рейтинг: {c.episode.length}</p> </div> ))} </div> <button>Назад</button> <button>Вперед</button> </div> ); } export default RickMortyAPI;