Children returned from FunctionComponent breaks Parent rendering logic

Question

I created a FunctionComponent that should return conditionally the children that are envolved by it.

<Tabs defaultActiveKey='1' type='card' activeKey={'1'}>
    <TabPane tab='Tab title' key='1'>
        <p>Tab title</p>
    </TabPane>
    <WrapperComponent>
        <TabPane tab='Tab title' key='2'>
            <p> Tab title 2 </p>
        </TabPane>
    </WrapperComponent>
</Tabs>


const WrapperComponent: React.FC<Props> = ({children}) => {
    if(true)
        return (children)
    else
        return <></>
}

When the wrapper returns the children element, the UI breaks and don't render properly. Tabs are imported from antd.

The result from the page render:

The same occurs on any element that are render whit some logic from antd UI library.

EDIT

I'm looking to find a way to render the child element based on some conditional, and after rendering it, force the parent element to "refresh" the UI, thus redoing the logic of creating the UI library component.

My goal in all of this is to create a component to validate that the logged in user has permission to render the object. With this, I seek to avoid the repetition of logic variables in the TSX file and obtain a more reusable and componentizable project architecture.

Answer 1

As you are trying to modularize the code. Move access control logic to a separate class, say ACL. This class doesn't need to be an UI component. Simple class will do.
In your UI component use class methods to determine if you want to show features or not.

Codepen demo
ACL.js

// access controll managment
var ACL = (function () {
  var role = "guest";
  var getRole = function () {
    return role;
  };

  var init = function () {
    //read local storage/ cookies and get role
    role = "admin";
  };

  var hasAccessTo = function (page, feature) {
    //do the checking
    return role === "admin";
  };

  // call this after login
  init();

  return {
    init: init,
    getRole: getRole,
    hasAccessTo: hasAccessTo
  };
})();

export default ACL;

In your UI component it can be used like this:

import ACL from "./ACL";


// filter based on role
function filter() {
  if (ACL.hasAccessTo("tabsPage", "secretTab")) {
    return (
      <TabPane tab="Secret" key="2">
        The access code is: ██████
      </TabPane>
    );
  }
}

const Demo = () => (
  <Tabs defaultActiveKey="1">
    <TabPane tab="Info" key="1">
      Genral info
    </TabPane>
     
    /* you can write a separate function to do the filtering */
    {filter()}

    /* OR use expression like this */
    {ACL.hasAccessTo("tabsPage", "secretTab") && 
      <TabPane tab="Secret 2" key="3">
        secret 2: some secret
      </TabPane> }
  </Tabs>

---

Your current WrapperComponent doesn't work because wrapped tabs are not getting processed properly. For example, id is rc-tabs-0-tab-null the key is missing.