My feature flag doesn't display whether it's toggled on or off

[EwanValentine]

I'm displaying/hiding menu items in a React app based on LD flags, each menu item is as follows:

const component = () => (
    <MenuItem
      button
      style={{ textDecoration: 'none', outline: 'none' }}
      {...menuItemProps}
    >
      {
        Boolean(icon) &&
        <ListItemIcon className={classes.iconMargin}>
          <Icon>{icon}</Icon>
        </ListItemIcon>
      }
      <ListItemText inset={(!icon && nested)}>
        <Typography className={getLinkClassName(location.pathname, url, nested, classes)}>
          {name}
        </Typography>
      </ListItemText>
    </MenuItem>
  );

  if (flag) {
    return (
      <FeatureFlag
        flagKey={flag}
        renderFeatureCallback={component}
      />
    );
  }

  return component();

The correct flag is passed on, but that menu item doesn't display. I have 'client enabled' for that flag, I have tried enabling it for all users, I've tried disabling targeting and defaulting it to display true. It just doesn't seem to show up whatever I set it to. My set-up, I have the following component:

function FeatureFlagProvider({
  key,
  user,
  tenant,
  children,
}) {
  return (
    <LaunchDarkly clientId={key} user={{ key: localStorage.getItem('AUTH0_USER'), email: user.email }}>
      {children}
    </LaunchDarkly>
  );
}

Which wraps around the app container at a top-level, so it should be present where I attempt to use it.

Might just be my set-up, but any help appreciated!

[sethbattin]

The only useful question i have is whether you have flags working anywhere in your app, or if they're only failing at this one point. I'm inferring that they're not working anywhere. About that, nothing jumps out at me as immediately in error in your code. I'm afraid I can only comment on how I would go about debugging. Apologies if you meant to say you had already done this.

I would probably start checking some execution flow with logs or debugger;s, like so:

console.log("component", {flag})
if (flag) {
  console.log("flagged", {flag})
    return (
      <FeatureFlag
        flagKey={flag}
        renderFeatureCallback={component}
      />
    );
  }

Or if you can step through code, even better. It might be a good idea to do that within the code of the library, too, probably here in renderLogic()

If none of that reveals any errors, you might consider putting a test directly inside your context provider (wiping out the entire rest of your application). If it works, then perhaps there's something amiss in an intermediate component or layout or other.

function FeatureFlagProvider({
  key,
  user,
  tenant,
  children,
}) {
  return (
    <LaunchDarkly clientId={key} user={{ key: localStorage.getItem('AUTH0_USER'), email: user.email }}>
      <FeatureFlag
        flagKey={flag}
        renderFeatureCallback={() => <div>feature flags working!!!!!</div>}
      />
    </LaunchDarkly>
  );
}

Hopefully that helps you binary-search your way closer to the issue. If you can identify any other clues about what's happening, by all means send them.

[sethbattin]

Closing due to lack of new info.