Palpebral

Любой подход имеет место быть, почему нет. Гриды можно использовать хоть для отступов между иконкой и текстом внутри кнопки. Это максимально удобная технология, которая предоставляет множество возможностей.

Главное просто учитывать поддержку различных свойств, которые Вы используете, под какие конкретно браузеры Вы хотите видеть используемые стили. Гриды хоть и уже относительно хорошо поддерживаются в большинстве браузеров, но все же)

Так вот же в официальной документации по React написано как передавать контекст между компонентами. Причем сказано как про классовые компоненты (ParentContext.Provider => ParentContext.Consumer), так и про функциональные (ParentContext.Provider => useContext(ParentContext).

Просто сам контекст из родительского компонента экспортировать:

export const ParentContext = React.createContext('123')

позднее в дочернем компоненте написать:

import {ParentContext} from '...'

Думаю что стоит почитать этот материал
https://learn.javascript.ru/bubbling-and-capturing