Closed anayak-alphasense closed 1 year ago
can some pls help me here ? How can I get the functional version of OptimizelyProvider ?
@anayak-alphasense Use OptimizelyContext
for functional component.
const { optimizely } = useContext(OptimizelyContext)
Hi Milind, Thanks for your response.
I don't see any usage of OptimizelyContext, how can I use it ? do I need to use it in-place of OptimizelyProvider or while creating the optimizely instance like
const optimizely = createInstance({ sdkKey: 'key', datafileOptions: { autoUpdate: true, updateInterval: 1000 }, });
Sorry, I misread your previous message. I thought you are asking how we can use OptimizelySdkClient
inside a functional component. Apologies for that!
About using OptimizelyProvider, I don't see an issue in using it for functional component. All you need is just wrap your parent component within Provider, no matter if the child component is functional/class.
const optimizelyClient = createInstance({
sdkKey: <key>,
})
const init = () => {
return (
<OptimizelyProvider optimizely={optimizelyClient} user={{ id: userId }}>
<App />
</OptimizelyProvider>
);
}
const App = () => {
const { optimizely } = useContext(OptimizelyContext)
optimizely?.track('Hello')
return <div>hi</div>
}
Hi Milind,
Yes, I am doing the same but my all the test cases of child components are getting failed because after wrapping them OptimizelyProvider they are not searchable and failing with below error.
My best guess would be that, we are doing some mistake while mocking "OptimizelyProvider". If that's not the case then I am sorry as I won't be able to help further.
Hi @anayak-alphasense - thanks for raising up this issue!
Although you cannot use hooks directly within a class component, you can have the class component render a functional component which uses hooks. Perhaps if you apply that to your use case it will resolve your issue?
Screenshot of workaround example:
If you need additional support, would be happy to help further if you are able to post a pseudo-code gist of your implementation.
Closing ticket as answer was provided
Hey Team,
I am using Optimizely/react-sdk version 2.8.1 for my AB testing purpose, It looks like the OptimizelyProvider that I am getting out of it is a class component due to which I am not able to use other hooks when I wrap my application inside OptimizelyProvider, can someone please assist to get a functional component version of the same.