Kevin Powell - Community•12mo ago

React 'state' issue, looking for explanation

The best I can do because of work permissions is share a pastebin copy (att'd) of the react component I'm working with. Luckily my problem doesn't go beyond the scope of this component anyhow. I'm returning two major pieces of html inside of the component's return div: 1. a <FullCalendar/> component, which has an event listener on it for clicking/interacting with 'events' in the calendar.. and 2. a <dialog/> component, which displays information about the event clicked on. The <dialog/> is triggered to open by the event handler on the FullCalendar, running dialog.showModal() inside of its hander, and which is an inbuilt method that comes with 'dialog'. The problem, and **formState**: This <Dates/> component is being invoked inside another component's <form/>, and receives and updates a formState object from that "parent" form in the other component. It's also receiving the update function: updateFormField() As the user interacts with the FullCalendar, clicking an 'event', I have a handler for the click declared in the Dates component, handleDateChange:

const handleDateChange = (info) => {
    const startDate = info.startStr;
    // Update formState with the selected dates
    console.log("handleDateChange was run");
    updateFormField("dates", { startDate }); //<--update formState

    console.log(formState);
  };

const handleDateChange = (info) => {
    const startDate = info.startStr;
    // Update formState with the selected dates
    console.log("handleDateChange was run");
    updateFormField("dates", { startDate }); //<--update formState

    console.log(formState);
  };

This updates the formState, and I confirmed it by console logging formState and seeing the change (see picture attachment of console) Parallel to the above handler, for the checkbox <input/> elements that I'm mapping, I have separate handler , 'handleCheckboxChange':

const handleCheckboxChange = (vehicle) => {
    console.log(vehicle); //THIS WORKS

    setSelectedVehicle(vehicle); //separate useState for component
    updateFormField("vehicle", { vehicle }); //<-- formState not updating
    console.log(selectedVehicle); //<--not set
    console.log(formState); //<-- not updated
  };

const handleCheckboxChange = (vehicle) => {
    console.log(vehicle); //THIS WORKS

    setSelectedVehicle(vehicle); //separate useState for component
    updateFormField("vehicle", { vehicle }); //<-- formState not updating
    console.log(selectedVehicle); //<--not set
    console.log(formState); //<-- not updated
  };

dates.js

5 Replies

thethingisbackOP•12mo ago

Like I noted, I can actually receive the 'vehicle' from clicking the checkbox, but when I attempt to set another useState variable, 'selectedVehicle' here, everything that the 'updateFormField' changed, is erased, and the new assignment to other useStates, doesn't occur. As the user moves through this Dates component's <dialog/>, I want to be able to periodically update the formState object. (ex; assigning the 'date.startingDate', assigning the 'vehicle' object, etc)

missymae•12mo ago

since you think have a problem with setSelectedVehicle, I'll point out there's a capitalization error in the onClose function

<dialog id="modal" onCLose={() => setSelectedVehicle({})}>

<dialog id="modal" onCLose={() => setSelectedVehicle({})}>

Probably does not solve the issue, but I will need to read it again to have a better idea.

thethingisbackOP•12mo ago

Basically, I want Dates to repeatedly update formState that's passed into it when it's invoked: <Dates formState={formState} updateFormField={updateFormField} /> so that everytime another handler is triggered inside of Dates, it's accessing and updating the 'most current' formState object

missymae•12mo ago

I think I understand the problem less now lol. But is this a conflict?

    <input
                  onChange={() => handleCheckboxChange(vehicle)}

    <input
                  onChange={() => handleCheckboxChange(vehicle)}

which logs the vehicle and sets it, but when you close the dialog modal, you set it again with an empty object.

thethingisbackOP•12mo ago

That's the desired behavior yes.. when dialog.close() is run as a result of clicking outside the modal, I want to scrap the user's form selections that happened, so yes resetting 'vehicle' to empty again. Dates receives a formState when its invoked, along with an update function. It has more than one event listener inside of it, we'll say "1" & "2" for example. What's happening is that the Dates component is invoked, and receives the formState. Then, event listener 1 is triggered, and its handler runs the update function to update one of formState's fields. Then, subsequently, event listener 2, inside this same component, is triggered, and its handler also runs the update function to update a different formState field. Well, if I were to console log formState right away in the handler for event listener 2, I would see an empty formState object, meaning it would not be reflecting the update that just occurred in event listener 1's handler. So although it seems like I'm able to affect formState, the 'state' of formState is not being communicated across the component, each listener handler is affecting its own instance of formState instead of all of them affecting 1. I think perhaps the answer is to only use 'updateFormField' once, and in the meantime declare a separate useState substitute for formState inside of Dates which is a copy of the received formState, and which can be updated/reflected inside of the Dates component, and then after all desired field changes are made, do a single one-timed update to the received formState using 'updateFormFields' that was passed into it???

Gaming

Programming

React 'state' issue, looking for explanation