1

I am working on a build/design system. and everything works fine. The only issue is when I publish my package and attempt to use the callback function. It doesn't properly return the data that is necessary for me to go to the next screen.

I attempted to get a reproducible example for you in CodeSandbox, however, there were some minor implications/errors that wouldn't allow me to get to the specific error I am talking to you about now. That seems to have its own issues.

So, how do you reproduce this error? Well, our package as of right now is public. As said above you can't import into CodeSandbox as it gives other errors on React versions (as said, I will deal with that later..). The package name is @sandboxcommerceeng/react the scss package you might need is @sandboxcommerceeng/scss. Go ahead and import into a CSS file. @import '@sandboxcommerceeng/scss/lib/global.css'. Then in the @sandboxcommerceeng/react package, import ECommercePlatformModal. The code below will give you a reproducible error. Platforms type, is also exported by @sandboxcommerceeng/react

const [showEcommerceModal, setShowEcommerceModal] = React.useState<boolean>(false);
const [url, setUrl] = React.useState<string>('');
const [selectedPlatform, setSelectedPlatform] = React.useState<keyof Platforms>();

<ECommercePlatformModal
  selectedPlatform={selectedPlatform}
  onSelectPlatform={(platform: keyof Platforms | undefined) =>
    setSelectedPlatform(platform)
  }
  showModal={showEcommerceModal}
  onCancel={() => setShowEcommerceModal(false)}
  okButtonProps={{ onClick: () => console.log(url) }} // ✴
  urlValidated={true}
  onUrlChange={(e: React.ChangeEvent<HTMLInputElement>) => {
    setUrl(e.target.value);
  }}
  url={url}
/>

✴: I am unable to get the URL from the state using a callback. I've tried just referencing a callback function separately and then logging the URL from there. I've also tried pasting in the URL from the callback. Nothing is working.

End Goal

The end goal here is to have it so that I am able to apply my package into my React application and have the package functionality, i.e. the javascript code implemented in the package itself, work as expected. Expectation for this particular component, is to be able to console.log the url and have it show in the package from the callback function okButtonProp{{onClick: () => console.log(url)}}

Please let me know if there is anything else you need from me.

graysonmcm
  • 87
  • 2
  • 17
  • Are the double curly braces necessary? Just using `okButtonProps={() => console.log(url)}` won't work is it? – Bms bharadwaj Jan 31 '22 at 17:39
  • @Bmsbharadwaj yes, just depends on how the interface looks for the this particular component. In this instance, it's like this because I'm using an object to reference all html/any other properties of that button. It's like this right now just because I'm stumped and have tried it all. – graysonmcm Jan 31 '22 at 22:18
  • Dear @graysonmcm, I edited your post to be more clarified for visitors, also I read it twice, but I didn't get what you meant? what do you want from the `✴` line? Do you need a callback function from `useState`? actually, you tried to explain how we could re-produce the issue, but I believe you should explain what is the issue and what's your need!, now tell me, what is your expectation, I will help you, no worreis. – AmerllicA Feb 02 '22 at 22:20
  • Thank you for editing the post. I will post what my end goal is. – graysonmcm Feb 02 '22 at 22:21

2 Answers2

0

Your answer lies here. (it could be just a comment but don't have enough reputation yet :) ).

N Molchanov
  • 183
  • 5
0

After debugging, the issue did lay within the build system itself. Using React.memo on a button component was the culprit. The memoization wasn't working as intended due to the fact that none of the props were actually changing on the component, therefore it wasn't re-rendering the button component with the new function and variables being passed down to it.

I went ahead and removed the memoization from the memoized component, as I couldn't see a way to fit memoization in this instance.

graysonmcm
  • 87
  • 2
  • 17