Совместное использование состояния между компонентами¶

import { useState } from 'react';

function Panel({ title, children }) {
    const [isActive, setIsActive] = useState(false);
    return (
        <section className="panel">
            <h3>{title}</h3>
            {isActive ? (
                <p>{children}</p>
            ) : (
                <button onClick={() => setIsActive(true)}>
                    Show
                </button>
            )}
        </section>
    );
}

export default function Accordion() {
    return (
        <>
            <h2>Almaty, Kazakhstan</h2>
            <Panel title="About">
                With a population of about 2 million, Almaty
                is Kazakhstan's largest city. From 1929 to
                1997, it was its capital city.
            </Panel>
            <Panel title="Etymology">
                The name comes from{' '}
                <span lang="kk-KZ">алма</span>, the Kazakh
                word for "apple" and is often translated as
                "full of apples". In fact, the region
                surrounding Almaty is thought to be the
                ancestral home of the apple, and the wild{' '}
                <i lang="la">Malus sieversii</i> is
                considered a likely candidate for the
                ancestor of the modern domestic apple.
            </Panel>
        </>
    );
}

import { useState } from 'react';

export default function Accordion() {
    return (
        <>
            <h2>Almaty, Kazakhstan</h2>
            <Panel title="About" isActive={true}>
                With a population of about 2 million, Almaty
                is Kazakhstan's largest city. From 1929 to
                1997, it was its capital city.
            </Panel>
            <Panel title="Etymology" isActive={true}>
                The name comes from{' '}
                <span lang="kk-KZ">алма</span>, the Kazakh
                word for "apple" and is often translated as
                "full of apples". In fact, the region
                surrounding Almaty is thought to be the
                ancestral home of the apple, and the wild{' '}
                <i lang="la">Malus sieversii</i> is
                considered a likely candidate for the
                ancestor of the modern domestic apple.
            </Panel>
        </>
    );
}

function Panel({ title, children, isActive }) {
    return (
        <section className="panel">
            <h3>{title}</h3>
            {isActive ? (
                <p>{children}</p>
            ) : (
                <button onClick={() => setIsActive(true)}>
                    Show
                </button>
            )}
        </section>
    );
}

import { useState } from 'react';

export default function Accordion() {
    const [activeIndex, setActiveIndex] = useState(0);
    return (
        <>
            <h2>Almaty, Kazakhstan</h2>
            <Panel
                title="About"
                isActive={activeIndex === 0}
                onShow={() => setActiveIndex(0)}
            >
                With a population of about 2 million, Almaty
                is Kazakhstan's largest city. From 1929 to
                1997, it was its capital city.
            </Panel>
            <Panel
                title="Etymology"
                isActive={activeIndex === 1}
                onShow={() => setActiveIndex(1)}
            >
                The name comes from{' '}
                <span lang="kk-KZ">алма</span>, the Kazakh
                word for "apple" and is often translated as
                "full of apples". In fact, the region
                surrounding Almaty is thought to be the
                ancestral home of the apple, and the wild{' '}
                <i lang="la">Malus sieversii</i> is
                considered a likely candidate for the
                ancestor of the modern domestic apple.
            </Panel>
        </>
    );
}

function Panel({ title, children, isActive, onShow }) {
    return (
        <section className="panel">
            <h3>{title}</h3>
            {isActive ? (
                <p>{children}</p>
            ) : (
                <button onClick={onShow}>Show</button>
            )}
        </section>
    );
}

import { useState } from 'react';

export default function SyncedInputs() {
    return (
        <>
            <Input label="First input" />
            <Input label="Second input" />
        </>
    );
}

function Input({ label }) {
    const [text, setText] = useState('');

    function handleChange(e) {
        setText(e.target.value);
    }

    return (
        <label>
            {label}{' '}
            <input value={text} onChange={handleChange} />
        </label>
    );
}

import { useState } from 'react';
import { foods, filterItems } from './data.js';

export default function FilterableList() {
    return (
        <>
            <SearchBar />
            <hr />
            <List items={foods} />
        </>
    );
}

function SearchBar() {
    const [query, setQuery] = useState('');

    function handleChange(e) {
        setQuery(e.target.value);
    }

    return (
        <label>
            Search:{' '}
            <input value={query} onChange={handleChange} />
        </label>
    );
}

function List({ items }) {
    return (
        <table>
            <tbody>
                {items.map((food) => (
                    <tr key={food.id}>
                        <td>{food.name}</td>
                        <td>{food.description}</td>
                    </tr>
                ))}
            </tbody>
        </table>
    );
}

export function filterItems(items, query) {
    query = query.toLowerCase();
    return items.filter((item) =>
        item.name
            .split(' ')
            .some((word) =>
                word.toLowerCase().startsWith(query)
            )
    );
}

export const foods = [
    {
        id: 0,
        name: 'Sushi',
        description:
            'Sushi is a traditional Japanese dish of prepared vinegared rice',
    },
    {
        id: 1,
        name: 'Dal',
        description:
            'The most common way of preparing dal is in the form of a soup to which onions, tomatoes and various spices may be added',
    },
    {
        id: 2,
        name: 'Pierogi',
        description:
            'Pierogi are filled dumplings made by wrapping unleavened dough around a savoury or sweet filling and cooking in boiling water',
    },
    {
        id: 3,
        name: 'Shish kebab',
        description:
            'Shish kebab is a popular meal of skewered and grilled cubes of meat.',
    },
    {
        id: 4,
        name: 'Dim sum',
        description:
            'Dim sum is a large range of small dishes that Cantonese people traditionally enjoy in restaurants for breakfast and lunch',
    },
];