Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

190
Visualizações
Build System CTA's/Callback function not working

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.

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

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

about 4 years ago · Juan Pablo Isaza Relatório

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.

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda