Добавить компонент в React

Не то чтобы я рекомендовал это, но вы можете использовать ReactDOM.createPortal для рендеринга компонента в любом месте dom:

<App>
  <SideBar/>
  <div id = "filters"></div>
  <ProductsInterface/>
</App>

Filters.js

...
render () {
    return ReactDOM.createPortal( <div>...</div>, document.getElementById('filters'))
}

Первый аргумент для createPortal - это JSX, который нужно отобразить, а второй аргумент - это элемент DOM для его визуализации. НО я бы рекомендовал вам использовать CSS, чтобы расположить его под боковой панелью.

Лучшим подходом было бы использование диспетчера состояний, такого как сокращение. Таким образом, вы сможете получить любую часть состояния в любом компоненте без необходимости вкладывать их друг в друга. Или, может быть, context api может помочь вам разделить некоторое состояние между компонентами.

Если вы хотите реорганизовать структуру компонентов своего приложения, вы можете создать общего предка для <Filter /> и <ProductList/>, который передает состояние обоим компонентам в качестве свойств. Итак, вместо этого:

<App>
    <SideBar/>
    <ProductsInterface>
        <ProductList>
            <Filter/>
        </ProductList>
    </ProductsInterface>
</App>

У вас будет что-то вроде этого:

<App>
    <ProductInfo> //product-related state lives here
        <Sidebar/>
        <Filter/>
        <ProductsInterface>
            <ProductList/>
        </ProductsInterface>
    </ProductInfo>
</App>

Это позволяет вам разместить фильтр внизу боковой панели, поскольку компоненты являются братьями и сестрами. <Filter/> может затем получить функции, подобные filterProducts(), в качестве опоры от <ProductInfo/> (его непосредственного родителя). В методе рендеринга ProductInfo.js это будет выглядеть следующим образом:

<Filter propName = "this.filterProducts"></Filter>

Затем настройте свой onClicks в <Filter/> для вызова функции из его свойств, которые обновят состояние в <ProductInfo/> и, соответственно, содержимое <ProductList/> (поскольку он получает состояние <ProductInfo/> в качестве свойств).

Этот шаблон называется состояние подъема вверх и довольно часто встречается в приложениях React. Я определенно рекомендую изучить его дальше, когда вы будете разрабатывать свою стратегию организации дерева компонентов.