Augustos Posts - Answer Overflow

Augustos

Posts Comments

KPCKevin Powell - Community

•Created by Augustos on 11/27/2023 in #front-end

How can i center a item in a flex row div, when has 2 childs?

6 replies

KPCKevin Powell - Community

•Created by Augustos on 11/17/2023 in #front-end

Animation when things are loaded, tailwind with reactjs

3 replies

KPCKevin Powell - Community

•Created by Augustos on 9/22/2023 in #front-end

Function call in hook with React

So heres is the thing, and i'm trying to study javascript refence x copy, and shallow copy, to understand it. Basically, if we have a function, and put it into a hook, and export it from the hook:

// myHook.ts
const useSuccess = setSuccessOverlay() // this is a hook, now useSuccess has: {openOverlay(), closeOverlay(), isOpen }

export {
useSuccess
}

// firstScreen.tsx

const { useSuccess } = myHook()

<Overlay isOpen={useSuccess.isOpen}>
//code
</Overlay>

// secondScreen.tsx

const { useSuccess } = myHook()

const makeOverlayOpen = () => {
  useSuccess.openOverlay()
}

<Button onClick={makeOverlayOpen}>...
// rest of the code

// myHook.ts
const useSuccess = setSuccessOverlay() // this is a hook, now useSuccess has: {openOverlay(), closeOverlay(), isOpen }

export {
useSuccess
}

// firstScreen.tsx

const { useSuccess } = myHook()

<Overlay isOpen={useSuccess.isOpen}>
//code
</Overlay>

// secondScreen.tsx

const { useSuccess } = myHook()

const makeOverlayOpen = () => {
  useSuccess.openOverlay()
}

<Button onClick={makeOverlayOpen}>...
// rest of the code

so, when i click on the Button, the overlay of firstScreen doesn't open, like, if a add a navigation on the onclick, and make

const makeOverlayOpen = () => {
  nav('firstScreen')
  useSuccess.openOverlay()
}

const makeOverlayOpen = () => {
  nav('firstScreen')
  useSuccess.openOverlay()
}

it will nav to the first screen, and the useSuccess tha comes from the hook, comes with isOpen = false even that, if a add a log on the click:

const makeOverlayOpen = () => {
  nav('firstScreen')
  useSuccess.openOverlay()
  console.debug(useSuccess.isOpen) // returns true
}

const makeOverlayOpen = () => {
  nav('firstScreen')
  useSuccess.openOverlay()
  console.debug(useSuccess.isOpen) // returns true
}

it's like each useSuccess that i reference when calling fron the hook, is a diffrent function in memory, pointers to a different one

1 replies

KPCKevin Powell - Community

•Created by Augustos on 8/24/2023 in #front-end

Why should i not use `()=> {}` on components elements like `onChange` or `onClick` in React?

I remember of another dev talking it to me, that things like: <button onClick={() => something} was a really bad thing, but i don't remember why or if it's true that is bad for the project or dev experience

11 replies

KPCKevin Powell - Community

•Created by Augustos on 8/16/2023 in #front-end

Best way to handle many possible components to render?

I just ask this on twitter, but what would be your approach to it, imagine: U have a page, that calls a hooks, that loads your data, ok. The return of the hooks is:

const {error, isLoading, data} = useGetMyData():

const {error, isLoading, data} = useGetMyData():

Now if some error happens i show one component, if islaoding u show another. If data is data.x u show <ComponentX/> if is data.y u show <ComponentY /> basically u have 4 possibly component to be showed in your page

6 replies

KPCKevin Powell - Community

•Created by Augustos on 6/29/2023 in #front-end

CSS Animation changing the background with many images

I have a css animation that uses a lot of images in the transition and this causes problems in the animation due to the number of image downloads that are made, making the animation have gaps

6 replies

Gaming

Programming