• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

263
Vistas
How to make props equal to state that does not exist yet?

Solved Thank you for your help

I am setting props of component

<Component myprops={state_variable}/>

The problem is that when I am creating the component and setting the props the state variable does not exist yet and my code breaks. What can I do to solve this problem? In addition when I change the state the prop is not updated.

 <ServiceTicket 
  
  showOverlay={Tickets_disabled_withError[ticket_num]?.isDisabled}
  showSelectedError={Tickets_disabled_withError[ticket_num]?.showError}

  />

My intial state initial variable:

 const [Tickets_disabled_withError,setTickets_disabled_withError] = useState({})

I am trying to call function that will update state and change value that props is equal to.

const OverLayOnAll = (enable) =>
{

  let tempobject =  Tickets_disabled_withError
  
  for (let key in tempobject)
  {
     if (enable == "true")
     {
      tempobject[key].isDisabled = true
     }
     else if (enable == "false")
     {
        tempobject[key].isDisabled = false
     }
    
  }

  setTickets_disabled_withError(tempobject)

}

I fixed the issue. Thank you so much for your help. I had to set use optional chaining ?. and also re render the component.

about 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

The value exists. It's just that the value itself is undefined. You need to set an initial value when defining your state

const [statevariable, setstatevariable] = useState({
  somekey: {
    isDisabled: false // or whatever the initial value should be
  }
}) // or whatever else you need it to be

For your second problem, you are using the same pointer. JavaScript does equality by reference. You've transformed the existing value, so React doesn't detect a change. The easiest way to fix this is to create a shallow copy before you start transforming

let tempobject =  {...Tickets_disabled_withError}
about 3 years ago · Juan Pablo Isaza Denunciar

0

Your question isn't very clear to me, but there's a problem in your setTickets_disabled_withError call.
When you update a state property (ticketsDisabledWithError) using its previous value, you need to use the callback argument.
(See https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous)

overlayAll = (enable)=> {
    setTicketsDisabledWithError((ticketsDisabledWithError)=> {
        return Object.keys(ticketsDisabledWithError).reduce((acc,key)=> {
            acc[key].isDisabled = (enabled=="true");
            return acc;
        }, {}); // initial value of reduce acc is empty object
    })
} 

Also, please learn JS variable naming conventions. It'll help both you, and those who try to help you.

about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda