How to make props equal to state that does not exist yet?-CodePudding

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.

CodePudding user response：

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}

CodePudding user response：

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.