Решение задания

Space of React

Решение заданияИзбегаем глубокой передачи пропсов — React Context | Max Roslow | Space of React

Sidebar

LetterRow

Sidebar

Viewer

selectedId

App


function App() {
    const [selectedId, setSelectedId] = React.useState(letters[0].id);
    const value = React.useMemo(() => ({ selectedId, setSelectedId }), [selectedId]);

    return (
        <MailContext.Provider value={value}>
            {/* ... */}
        </MailContext.Provider>
    );
}


function LetterRow({ letter }) {
    const { selectedId, setSelectedId } = React.useContext(MailContext);
    const active = letter.id === selectedId;

    return (
        <div
            className={'listItem ' + (active ? 'listItemActive' : '')}
            onClick={() => setSelectedId(letter.id)}
        >
            {/* ... */}
        </div>
    );
}


function Sidebar({ letters }) {
    return (
        <div className="panel">
            //...
            {letters.map((l) => (
                <LetterRow key={l.id} letter={l} />
            ))}
            //...
        </div>
    );
}

function App() {
    const [selectedId, setSelectedId] = React.useState(letters[0].id);
    //...

    return (
        <MailContext.Provider value={value}>
            //...
            <Sidebar letters={letters} />
            <Viewer />
            //...
        </MailContext.Provider>
    );
}

Войдите, чтобы смотреть видео

Избегаем передачи пропсов

Задание