7 replies

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/>
<FullCalendar/>
<FullCalendar/>
<FullCalendar/> component, which has an event listener on it for clicking/interacting with 'events' in the calendar.. and
2. a <dialog/>
<dialog/>
<dialog/>
<dialog/> component, which displays information about the event clicked on. The <dialog/> is triggered to open by the event handler on the

FullCalendar

FullCalendar

FullCalendar

FullCalendar, running

dialog.showModal()

dialog.showModal()

dialog.showModal()

dialog.showModal() inside of its hander, and which is an inbuilt method that comes with 'dialog'.

The problem, and

**formState**

**formState**

**formState**

**formState**:

This

<Dates/>

<Dates/>

<Dates/>

<Dates/> component is being invoked inside another component's <form/>, and receives and updates a

formState

formState

formState

formState object from that "parent" form in the other component.

It's also receiving the update function:

updateFormField()

updateFormField()

updateFormField()

updateFormField()

As the user interacts with the FullCalendar, clicking an 'event', I have a handler for the click declared in the Dates component,

handleDateChange

handleDateChange

handleDateChange

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);
  };

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
  };

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.js9.93KB

React 'state' issue, looking for explanation

Similar Threads

Similar Threads

Similar Threads