How to write a component that will return the component that was put in it?

Question

React

below is an example. The bottom line is that I want the MayBeHidden component to subscribe to the store and, depending on the user's rights, return the content or not. But faced that:
1. a component which returns and accepts a lodge, values. In the case of a variable, I wrote {...this.props}, but here I slow down something
2. what I plan to put inside a rather different plan, from a button / form to a table or an entire page.

<MayBeHidden>
            <BtnAdd 
                pasword_placeholder = {'Введите пароль'} 
                name_placeholder = {'Введите имя'} 
                btnname = {'Добавить пользователя'}
                dataFromform = {this.adduser}
                kindUser = {'User'}
                defaultgroup = {this.props.login}
            >    
            </BtnAdd>  
</MayBeHidden>

Answer 1

render() {
  const isHidden = false; 

  if (isHidden) return null;

  return <children.type {...children.props} additionalProp="an value" />;
}

Answer 2

https://habrahabr.ru/post/309422/ - a wonderful article, after which you can easily write a High order component

Answer 3

render() {
  return <div>{this.props.children}</div>
}

Answer 4

For such cases, it is more correct to use HOC.