Statsig - How to get true value from feature gate?

Question

I am trying to implement StatSig(Refer: https://docs.statsig.com/) feature into my react(Nextjs) application. I have created new feature gate changeComponentUI and Rule has been added as Environment Tier -> Any of - staging, development. From client side I am trying retrieve the data as const statsigFeatureOn = useGate('changecomponentui').value, here I am always getting false value even if it is ON.

In app.js I have initialized like,

<StatsigProvider
   sdkKey={"client-PsdasdASQW6556aIOPASASsqwewqeGSsad"}
   user={{ userId, }}
   options={{ environment: { tier: 'staging' } }}
   waitForInitialization={true}
 >
    <Component {...args} />
</StatsigProvider>

In browser's Network tab I am getting -

Request Payload as,

{"user":{"userID":"","statsigEnvironment":{"tier":"staging"}},"statsigMetadata":{"sessionID":"433h67a3-416c-4914-82fd-e3c2b12f7n05","sdkType":"react-client","sdkVersion":"0.5.1","stableID":"8d122318-6d18-2322-889a-83c10e44e46"}}

Output is (Preview),

{
"gates": {
    "+ZpxDXVQ/Rbhf02jl1Yv91VU+X+c0Gq/DZM+CmjPJgc=": false,
    "uwglh6w2Nas8RufxC82qrsVAohod9gsGpvaT6/1l7ts=": false,
    "sKSndsyjj+9MYUFlHPcdavbtA38g1+PjhofnyTDSxU8=": false,
    "w9AtEJ/+vqrqb1kh8KPvhN2Rd32mkwfR+gxvlesY4ac=": true,
    "gUZn3VlwEVdqBs7NcXGWHpBueNz0rlZGTufpLeB8Fug=": false
},
"feature_gates": {
    "+ZpxDXVQ/Rbhf02jl1Yv91VU+X+c0Gq/DZM+CmjPJgc=": {
        "name": "+ZpxDXVQ/Rbhf02jl1Yv91VU+X+c0Gq/DZM+CmjPJgc=",
        "value": false,
        "rule_id": "",
        "secondary_exposures": []
    },
    "uwglh6w2Nas8RufxC82qrsVAohod9gsGpvaT6/1l7ts=": {
        "name": "uwglh6w2Nas8RufxC82qrsVAohod9gsGpvaT6/1l7ts=",
        "value": false,
        "rule_id": "",
        "secondary_exposures": []
    },
    "sKSndsyjj+9MYUFlHPcdavbtA38g1+PjhofnyTDSxU8=": {
        "name": "sKSndsyjj+9MYUFlHPcdavbtA38g1+PjhofnyTDSxU8=",
        "value": false,
        "rule_id": "default",
        "secondary_exposures": []
    },
    "w9AtEJ/+vqrqb1kh8KPvhN2Rd32mkwfR+gxvlesY4ac=": {
        "name": "w9AtEJ/+vqrqb1kh8KPvhN2Rd32mkwfR+gxvlesY4ac=",
        "value": true,
        "rule_id": "6ZcQ0LOgAi2kSd5QgbtJzJ",
        "secondary_exposures": []
    },
    "gUZn3VlwEVdqBs7NcXGWHpBueNz0rlZGTufpLeB8Fug=": {
        "name": "gUZn3VlwEVdqBs7NcXGWHpBueNz0rlZGTufpLeB8Fug=",
        "value": false,
        "rule_id": "default",
        "secondary_exposures": []
    }
},
"configs": {},
"dynamic_configs": {},
"sdkParams": {},
"has_updates": true,
"time": 1631164754145
}

How can I get true value here? Also in output there is one object with true value but I am not getting it is for which feature gate's data.

Please help me to solve this issue.

Answer 1

Make sure you are using the exact ID from the console. In this case, you might need to do const statsigFeatureOn = useGate('changecomponentui').value if the feature name is "ChangeComponentUI" but the id is "changecomponentui". I believe all ID's are currently lowercase, but maybe camel case is a good reason not to do that (or to be case-insensitive)

(Edit) The following code snippet works for me in next.js after creating a gate by the same steps:

import React from "react";
import { StatsigProvider, useGate } from "statsig-react";

export default function App(): JSX.Element {
  return (
      <StatsigProvider
        sdkKey={"client-(redacted)"}
        user={{ userID: "" }} // Fixed from userId, but since userID didn't matter both worked in this case
        options={{ environment: { tier: "staging" } }}
        waitForInitialization={true}
      >
        <TestComponent />
      </StatsigProvider>
  );
}

function TestComponent() {
  const statsigFeatureOn = useGate("changecomponentui").value;
  return <div>{String(statsigFeatureOn)}</div>;
}