Для отрисовки баттонов в меню приложуха делает так: каждый Button оборачивает в Wrapper, который в зависимости от некоторых условий возвращает или нет исходный компонент Button.
Довольно удобно и красиво получается. Батоны в массиве с их враперами, которые в зависимости от роута, доступности данных или еще каких-то условий возвращают или нет баттоны, в итоге легко масштабируемое динамическое меню.
Но вот возник вопрос - как заранее узнать сколько будет отрендерено баттонов? Главное проверить на 0, есть ли хоть один баттоно?
По идее надо как-то срендерить эту конструкцию в переменную, но как?
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<Wrapper>
{({ label, icon, onClick }) => (
<Button
onClick={onClick}
icon={icon}
>
{label}
</Button>
)}
</Wrapper>
</div>
);
}
export class Wrapper extends React.Component {
render() {
const param = true;
const { children } = this.props;
const node = children({
label: "Кнопка1",
onClick: () => alert("onClick")
});
return Boolean(param) && node;
}
}
export class Button extends React.Component {
render() {
const { onClick } = this.props;
return <button onClick={onClick}>{this.props.children}</button>;
}
}
Тут пример -
https://codesandbox.io/s/frosty-aryabhata-1zefx 
