https://www.growthbook.io/ logo
Join Slack
Powered by
This is my code.
# ask-questions
m
This is my code.
b
hey luiz, can you share the part of the code where you're calling 
loadFeatures()
and where you're setting your attributes and creating the growthbook Context? we want to make sure there isn't a race condition. one thing i noticed is the casing is different for 
buttonColor
and 
buttoncolor
. at this point we only support all lower-case keys, not sure if that could be related. can you share the endpoint for the features JSON? if 
buttonColor
isn't on it, it'll always be false, and i imagine that maybe you may be looking for 
buttoncolor
. the key needs to be exact in the JSON.
if this is the case, and your project uses typescript, you may find it helpful to generate type-safe feature keys with the growthbook CLI. it can alleviate errors in typing the wrong keys: https://docs.growthbook.io/tools/cli#generating-types-1
m
Hi, thanks for replying, I'm forwarding some more information about the code, could I have missed something please?
Copy code
const growthbook = new GrowthBook({
  apiHost: "<https://cdn.growthbook.io>",
  clientKey: "my-key",
  enableDevMode: true,
  trackingCallback: (experiment, result) => {
    console.log("Viewed Experiment", {
      experimentId: experiment.key,
      variationId: result.key,
    });
  },
}); 

/.../

useEffect(() => {
  growthbook.loadFeatures({ autoRefresh: true });
}, []);
My experimental
image.png
b
do you have a feature 
buttonColor
in the Features section of the app: https://app.growthbook.io/features
m
No, only in experimental
In Features i have 
index-title
feature.
b
since that feature isn't there, this code will always evaluate to false which is why your button is always blue:
Copy code
const newButtonColor = useFeatureIsOn("buttonColor");
create a feature 
buttoncolor
with the string variations there so that it matches your experiment. you should then start to see some variation when changing the attributes 
id
after you created 
buttoncolor
change your code to:
Copy code
const newButtonColor = useFeatureIsOn("buttoncolor");
you can also use 
button-color
instead for the feature key but it should be lower cased
m
Okay, now I have a 
buttoncolor
feature
image.png
And I changed my code to:
Copy code
import React from "react";

import { useFeatureIsOn } from "@growthbook/growthbook-react";

export default function Home() {
  const newButtonColor = useFeatureIsOn("buttoncolor"); // Its' my feature

  console.log(newButtonColor);

  return (
    <>
      {newButtonColor ? (
        <p style={{ background: "red" }}>VERMELHO</p>
      ) : (
        <p style={{ background: "blue" }}>AZUL</p>
      )}
    </>
  );
}
Right? Now how do I vary between blue and red (use the a/b test)
I created my a/b test inside the `buttoncolor' feature
Thanks for helping me @better-magician-65629
b
no problem, is everything working out ok?
m
Not yet Tina, hahaha I can't get the test to switch between A and B
Did I do something wrong? following what I sent from the code and the platform? @better-magician-65629
b
when you visit this page, does the feature exist? https://app.growthbook.io/features/buttoncolor
slack is having an incident so i cannot verify your screenshots again. can you verify: • which environment your SDK connection was created for? e.g. production, staging, development, etc. • is the feature toggled on for that environment? can you also share your features endpoint so i can see if it's there? it should be in the response JSON. if it isn't, that's why it's not working. another area where it could always evaluate to false if there is no attribute 
id
in the targeting attributes. you mention you are reading the device ID from a cookie/data layer, is it possible it's not present when setting the attributes? if you install the growthbook chrome extension, you can troubleshoot these things more easily. it will show you the features available and the user attributes that are used for targeting. and if all looks ok in the chrome extension, you may have a bug in your UI logic.
you can also look at some of our examples: https://github.com/growthbook/examples you can clone the repository and run each of the projects available to see examples in various languages and frameworks. most of them use this features JSON so you can see the data: https://cdn.growthbook.io/api/features/java_NsrWldWd5bxQJZftGsWKl7R2yD2LtAK8C8EUYh9L8 some examples that might be relevant since they're in JS: vanilla typescript, react native, vue (there's 2), nextjs
39 Views
Open in Slack
PreviousNext
Powered by