https://www.growthbook.io/ logo
#ask-questions
Title
# ask-questions
m

millions-author-34878

07/31/2023, 5:02 PM
This is my code.
b

better-magician-65629

07/31/2023, 7:33 PM
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

millions-author-34878

08/01/2023, 12:08 PM
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

better-magician-65629

08/01/2023, 4:47 PM
do you have a feature
buttonColor
in the Features section of the app: https://app.growthbook.io/features
m

millions-author-34878

08/01/2023, 5:52 PM
No, only in experimental
In Features i have
index-title
feature.
b

better-magician-65629

08/01/2023, 5:54 PM
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

millions-author-34878

08/01/2023, 5:58 PM
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

better-magician-65629

08/01/2023, 8:33 PM
no problem, is everything working out ok?
m

millions-author-34878

08/02/2023, 12:11 PM
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

better-magician-65629

08/02/2023, 4:49 PM
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
18 Views