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

Space of React

Решение заданияСкрытие деталей провайдера — React Context | Max Roslow | Space of React


function useMail() {
    const value = React.useContext(MailContext);

    if (!value) throw new Error('useMail только внутри MailProvider');

    return value;
}


function MailProvider({ children }) {
    const [selectedId, setSelectedId] = React.useState('1');
    const letters = React.useMemo(() => [/* ... */], []);
    const value = React.useMemo(() => ({ letters, selectedId, setSelectedId }), [selectedId]);

    return <MailContext.Provider value={value}>{children}</MailContext.Provider>;
}


function App() {
    return (
        <MailProvider>
            <div className="container">
                {/* ... */}
            </div>
        </MailProvider>
    );
}


function MailProvider({ children }) {
    //...
    return <MailContext.Provider value={value}>{children}</MailContext.Provider>;
}

function App() {
    return (
        <MailProvider>
            <div className="container">
                <div className="topBar">
                    <h1 className="title">Почта</h1>
                    <InboxCount />
                </div>
                {/* ... */}
            </div>
        </MailProvider>
    );
}

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

Скрытие деталей провайдера

Задание