React - Content is wrapped within a div when the feature flag is enabled

[LeoDoldan7]

Bug description

If a feature flag is enabled, all the content within it is wrapped in a div. This messes up the UI, for example if you are using a grid and have two elements inside (they'll be wrapped in a div, which counts as one).

This is the wrapper I'm using:

import { PostHogFeature, PostHogFeatureProps } from 'posthog-js/react'

export const FeatureFlag: FC<FeatureFlagProps> = ({ children, flag, ...props }) => {
  return (
    <PostHogFeature {...props} flag={flag} match={true}>
      {children}
    </PostHogFeature>
  )
}

Expected behavior

Content is returned within <></> so it works as if PostHog didn't exist.

Additional context

"posthog-js": "^1.130.2",
"react": "^18.2.0",

Debug info

- [x] PostHog Cloud, Debug information: [please copy/paste from https://us.posthog.com/settings/project-details#variables]

Session: https://us.posthog.com/project/sTMFPsFhdP1Ssg/replay/01900ca8-f190-75c5-8b42-76c36a42f4ac?t=5105 
Admin: http://go/adminOrgUS/0184430c-1da3-0000-1991-295ed9f97bfc (Project: 31304)
Sentry: http://go/sentryUS/31304

[LeoDoldan7]

@velenyak pointed out I can just use posthog.isFeatureEnabled(flag) and a ternary operator.

[neilkakkar]

Indeed that's the way to go - but I'll keep this open for now, would be good to not have to go with the workaround

[joesaunderson]

+1 to this. It's annoying as the function does not automatically capture the interaction events like the component.

[yallups]

+1. whyyyy