Как обернуть 2 или более пункта меню, чтобы использовать их в одном условии, используя React и ant design?

Question

Я хотел бы построить навигационную панель. Но в моем случае мне нужно условие для отображения части пунктов меню (вход, регистрация), если пользователь не вошел в систему, или подменю, если пользователь вошел в систему, используя значение «props». Я пробовал что-то, но это не изящное решение.

function Navbar(props) {
  const { t } = useTranslation();
  return (
    <Menu mode="horizontal">
      <Menu.Item key="createCode">
        <Link to="/create-code">{t('Add code')}</Link>
      </Menu.Item>
      {props.userData.id
        ? <SubMenu title={props.userData.id}>
            <Menu.Item key="myCodes">{t('My codes')}</Menu.Item>
            <Menu.Item key="logOut">{t('Log out')}</Menu.Item>
          </SubMenu>
        : <Menu.Item key="logIn">
            <Link to="/login">{t('Log in')}</Link>
          </Menu.Item>
      }
      {props.userData.id
        ? null
        : <Menu.Item key="register">
            <Link to="/register">{t('Register')}</Link>
          </Menu.Item>
      }
    </Menu>
  );
}

Чтобы не использовать повторяющийся код, я попытался обернуть 2 пункта меню <div> ... </div>, <> ... </>, <React.Fragment> ... </React.Fragment> и другими подобными вещи, но безуспешно.

Answer 1

Условия такие же, просто объедините код вместе.

<Menu mode="horizontal">
    <Menu.Item key="createCode">
        <Link to="/create-code">{t('Add code')}</Link>
    </Menu.Item>
    {props.userData.id ?
        <SubMenu title={props.userData.id}>
            <Menu.Item key="myCodes">{t('My codes')}</Menu.Item>
            <Menu.Item key="logOut">{t('Log out')}</Menu.Item>
        </SubMenu> :
        <Menu.Item key="logIn">
            <Link to="/login">{t('Log in')}</Link>
        </Menu.Item>
        <Menu.Item key="register">
            <Link to="/register">{t('Register')}</Link>
        </Menu.Item>
    }
</Menu>