React state - Githubissues

Code: https://github.com/Nolra/front_course_2023/tree/react-state

Дополнительные материалы для изучения:

Добавьте к нашему компоненту Tabs динамики, используя useState, и сделайте так, чтобы при активной первой вкладке отображался компонент домашнего задания (из папки components/Homeworks), который в свою очередь будет иметь дочерних компонентов из заданий, размещенных ниже.

Описания домашних заданий: (https://nolra.github.io/react_hw/ - state tab)

1. Добавление и удаление класса CSS (ToggleBgImg) Сделайте так, чтобы щелчок на картинке удалял CSS-класс background__active из внешнего

, но добавлял класс picture__active к . Повторный щелчок по фону восстановит исходные CSS-классы.

Cтили для background__active - цвет фона - #8B00FF, для picture__active черную границу шириной 5px.

Визуально вы должны увидеть, что щелчок на изображении удаляет фиолетовый фон и добавляет границу изображения. Щелчок за пределами изображения добавляет фиолетовый фон, но убирает выделение границы изображения.

export default function ToggleBgImg() {
    return (
        <div className="background background__active">
            <img
                className="picture"
                alt="Rainbow houses in Kampung Pelangi, Indonesia"
                src="https://i.imgur.com/5qwVYb1.jpeg"
            />
        </div>
    );
}

(подсказка: при обработке клика по картинке вам вероятнее всего потребуется запретить поднятие события)

2. Исправление компонента, который не обновляется (Clock) Этот компонент Clock получает два пропса: color и time. Когда вы выбираете другой цвет в поле выбора, компонент Clock получает другой пропс color от своего родительского компонента.

Однако по какой-то причине отображаемый цвет не обновляется. Объясните почему и устраните проблему.

// вызов компонента
const [color, setColor] = useState("red");
//…
return (
  <>
   <input value={color} onChange((e) => setColor(e.target.value))
   <Clock color={“red”} tyme={"12.00"} />
  </>
)
//…

// Clock.jsx
export default function Clock(props) { 
    const [color, setColor] = useState(props.color);
    return <div style={{ color: color }}>{props.time}</div>;
}

3. Напишите приложение Counter, которое будет иметь возможность изменять прибавляемое и убавляемое число как в образце.

4. Допишите и исправьте сломанный упаковочный лист (TravelPlan) Этот упаковочный лист имеет нижний колонтитул, который показывает, сколько предметов упаковано, и сколько предметов в целом. Поначалу кажется, что это работает, но на самом деле это ошибка.

Например, если вы пометите предмет как упакованный, а затем удалите его, счетчик не будет обновлен правильно. Исправьте счетчик так, чтобы он всегда был корректным.

Кроме того опишите два недостающих компонента - AddItem и PackingList

import { useState } from 'react';
import AddItem from './AddItem.jsx';
import PackingList from './PackingList.jsx';

let nextId = 3;
const initialItems = [
    { id: 0, title: 'Warm socks', packed: true },
    { id: 1, title: 'Travel journal', packed: false },
    { id: 2, title: 'Watercolors', packed: false },
];

export default function TravelPlan() {
    const [items, setItems] = useState(initialItems);
    const [total, setTotal] = useState(3);
    const [packed, setPacked] = useState(1);

    function handleAddItem(title) {
        setTotal(total + 1);
        setItems([
            ...items,
            { id: nextId++, title: title, packed: false },
        ]);
    }

    function handleChangeItem(nextItem) {
        if (nextItem.packed) {
            setPacked(packed + 1);
        } else {
            setPacked(packed - 1);
        }
        setItems(
            items.map((item) => {
                if (item.id === nextItem.id) {
                    return nextItem;
                } else {
                    return item;
                }
            })
        );
    }

    function handleDeleteItem(itemId) {
        setTotal(total - 1);
        setItems(
            items.filter((item) => item.id !== itemId)
        );
    }

    return (
        <>
            <AddItem onAddItem={handleAddItem} />
            <PackingList
                items={items}
                onChangeItem={handleChangeItem}
                onDeleteItem={handleDeleteItem}
            />
            <hr />
            <b>
                {packed} out of {total} packed!
            </b>
        </>
    );
}

Необязательная задача: *5. Заставь ее прыгать.**

Используя спрайт (можно взять с https://nolra.github.io/react_hw/) с 6 кадрами и функцию setTimeout вы должны разработать анимацию прыжка как в образце.

Чтобы решить задачу вам потребуется рекурсивность и глубокое понимание работы работы состояния в компоненте. Разрабатывая это решение думайте о том, как использовать рендеринг react компонента в решении этой задачи.

Nolra / front_course_2023

React state #19