I'm working on a scheduling web application.

I am trying to implement a feature that detects the total hours between two times, startTime and endTime, which are selected on a form and stored via the useState hook:

```
    const [startTime, setStartTime] = useState("")
    const [endTime, setEndTime] = useState("")

    const [totalHours, setTotalHours] = useState(0)

```

The end goal is to calculate and print the total hours between both times next to "totalHours:" in the UI:
[Image of UI for selecting start, end times and total hours](https://i.stack.imgur.com/lguYx.png)

My Issue: The onChange event is only updating startTime and endTime to the PREVIOUS state whenever I update their respective fields on the form.

For example, both start at "12:00AM". If I change the startTime to "1:00AM", when I read startTime using `console.log(startTime)`, it prints "NaN". If I then change startTime a second time, say to "2:00AM", `console.log(startTime)` prints "1:00AM"

I tried googling this and only found other threads referring the state as a component prop, nothing that uses the useState hook:

[react useState hook variable value don't update on input onChange event](https://stackoverflow.com/questions/58497548/react-usestate-hook-variable-value-dont-update-on-input-onchange-event)

[React setState not Updating Immediately](https://stackoverflow.com/questions/38558200/react-setstate-not-updating-immediately?noredirect=1&lq=1)

My understanding is that the setter functions for the useState hook, e.g. setStartTime() and setEndTime(), run asynchronously and cause this error.

I would appreciate any help.

my React/Typescript code:

The form HTML:

```
    return(
            <form>

                ...

                    <label>
                        startTime:
                        {/* <input type="text" className={inputStyle} onChange={(e) => setStartTime(e.target.value)}/> */}
                        <div id="selectStartTime">
                            <select className={inputStyle} name="startTimeHour" id="startTimeHour" 
                            onChange={(e) => handleStartTimeChange(e.target.value)}> {/*set the time AND calculate total hours*/}
                                <option value="12:00AM">12:00AM</option>
                                <option value="1:00AM">1:00AM</option>
                                <option value="2:00AM">2:00AM</option>
                                <option value="3:00AM">3:00AM</option>
                                <option value="4:00AM">4:00AM</option>
                                <option value="5:00AM">5:00AM</option>
                                <option value="6:00AM">6:00AM</option>
                                <option value="7:00AM">7:00AM</option>
                                <option value="8:00AM">8:00AM</option>
                                <option value="9:00AM">9:00AM</option>
                                <option value="10:00AM">10:00AM</option>
                                <option value="11:00AM">11:00AM</option>
                                <option value="12:00PM">12:00PM</option>
                                <option value="1:00PM">1:00PM</option>
                                <option value="2:00PM">2:00PM</option>
                                <option value="3:00PM">3:00PM</option>
                                <option value="4:00PM">4:00PM</option>
                                <option value="5:00PM">5:00PM</option>
                                <option value="6:00PM">6:00PM</option>
                                <option value="7:00PM">7:00PM</option>
                                <option value="8:00PM">8:00PM</option>
                                <option value="9:00PM">9:00PM</option>
                                <option value="10:00PM">10:00PM</option>
                                <option value="11:00PM">11:00PM</option>
                            </select>
                        </div>
                    </label>

                    <br/>
                    <label>
                        endTime:
                        {/* <input type="text" className={inputStyle} onChange={(e) => setEndTime(e.target.value)}/> */}
                        <div id="selectEndTime">
                            <select className={inputStyle} name="endTimeHour" id="endTimeHour" 
                            onChange={(e) => handleEndTimeChange(e.target.value)}> {/*set the time AND calculate total hours*/}
                                <option value="12:00AM">12:00AM</option>
                                <option value="1:00AM">1:00AM</option>
                                <option value="2:00AM">2:00AM</option>
                                <option value="3:00AM">3:00AM</option>
                                <option value="4:00AM">4:00AM</option>
                                <option value="5:00AM">5:00AM</option>
                                <option value="6:00AM">6:00AM</option>
                                <option value="7:00AM">7:00AM</option>
                                <option value="8:00AM">8:00AM</option>
                                <option value="9:00AM">9:00AM</option>
                                <option value="10:00AM">10:00AM</option>
                                <option value="11:00AM">11:00AM</option>
                                <option value="12:00PM">12:00PM</option>
                                <option value="1:00PM">1:00PM</option>
                                <option value="2:00PM">2:00PM</option>
                                <option value="3:00PM">3:00PM</option>
                                <option value="4:00PM">4:00PM</option>
                                <option value="5:00PM">5:00PM</option>
                                <option value="6:00PM">6:00PM</option>
                                <option value="7:00PM">7:00PM</option>
                                <option value="8:00PM">8:00PM</option>
                                <option value="9:00PM">9:00PM</option>
                                <option value="10:00PM">10:00PM</option>
                                <option value="11:00PM">11:00PM</option>
                            </select>
                        </div>
                    </label>

                    <br/>
                    <label>
                        totalHours: {}
                    </label>

                 ...

          </form>

```

The handler functions for onChange:

```
    const handleStartTimeChange = (time: string) => {
        setStartTime(time);
        calculateTotalHours();
    }

    const handleEndTimeChange = (time: string) => {
        setEndTime(time);
        calculateTotalHours();
    }

```

The function that calculates the total hours between startTime and endTime
(This is where I console.log to see that the error is happening)

```
    // calculate total hours based on start and end time
    const calculateTotalHours = () => {

        // convert strings as times to ints with values from 0 to 23 to represent 24 hour time
        // where 0 = 12am and 23 = 11pm

        // NOTE: This is where I see my error occuring
        console.log(startTime, endTime)

        // Get hours value
        // All values before ":", split time by colon and get first value, convert to int 
        let startTimeValue = parseInt(startTime.split(":")[0]);
        let endTimeValue = parseInt(endTime.split(":")[0]);

        // if either time is 12, remove 12 hours
        if (startTimeValue === 12) {
            startTimeValue -= 12;
        }
        if (endTimeValue === 12) {
            endTimeValue -= 12;
        }

        // if either time has PM, add 12 hours respectively
        if (startTime.includes("PM")) {
            startTimeValue += 12;
        }
        if (endTime.includes("PM")) {
            endTimeValue += 12;
        }

        // calculate time between start and end times
        const total = endTimeValue - startTimeValue;

        // if that value is negative, return 0.
        if (totalHours < 0) {
            const total = 0;
            setTotalHours(total);
        }

        // else, return the value  
        setTotalHours(total);
    }

```