/
drndsv
/
react
Обзор
Документация
Войти
/
drndsv
/
react
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
src/components/EffectsSection.jsx
58 строк
2 KB
drndsv
конец
28 апр 2025, 16:20
28 апр 2025, 16:20
951d98f
Код
Авторство
О чём код?
import { useEffect, useState, useCallback } from "react"; import Button from "./Button/Button"; import Modal from "./Modal/Modal"; import useInput from "../hooks/useInput"; export default function EffectsSection() { const input = useInput(); const [modal, setModal] = useState(false); const [loading, setLoading] = useState(false); const [users, setUsers] = useState([]); const fetchUsers = useCallback(async () => { setLoading(true); const response = await fetch("https://jsonplaceholder.typicode.com/users"); const users = await response.json(); setUsers(users); setLoading(false); }, []); useEffect(() => { fetchUsers(); }, [fetchUsers]); return ( <section> <h3>Effects</h3> <Button style={{ marginBottom: "1rem" }} onClick={() => setModal(true)}> Открыть информацию </Button> <Modal open={modal}> <h3>Hello from modal</h3> <p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil dolorem sit id ad. Praesentium odio nam dolorem possimus reprehenderit dolorum esse et laborum debitis? Nesciunt ex tempore esse unde et. </p> <Button onClick={() => setModal(false)}>Закрыть</Button> </Modal> {loading && <p>Loading...</p>} {!loading && ( <> <input type="text" className="control" {...input} /> <ul> {users .filter((user) => user.name.toLowerCase().includes(input.value.toLowerCase()) ) .map((user) => ( <li key={user.id}>{user.name}</li> ))} </ul> </> )} </section> ); }