React App requires two button submits to calculate my results

Hi, i’m working on an app for swim coaching.

If you select the first test type here, “single time trial”, then just enter 100 & 100 in the two input fields (distance and time), then click “add time trial”, the table below doesn’t update correctly until you have pressed the button twice.

Can anyone help me debug this? Here is the working app. (it may take a minute to wake up, so refresh if needed)

https://immaculatepolishedprintablecharacter.adventurebear.repl.co/

And here is the code:

https://replit.com/@AdventureBear/ImmaculatePolishedPrintablecharacter

I’ll be working on this tomorrow evening so it may ‘break’ but if you have a chnace to look before then I would appreciate it!

Did you fix it, it seems to work.

BTW, you have a semi-colon after the PaceTable component that shouldn’t be there (you can see it on the page as text content).

1 Like

It still does not work.

Peek 2023-02-27 11-54

1 Like

I guess I misunderstood the problem. I was just looking for it to update and not the actual results.

1 Like

I believe the expectation is for the results that show the second time after the button is clicked to show after the first time instead.

1 Like

Link to code:

ImmaculatePolishedPrintablecharacter - Replit

Is m ever going to be anything other than the fixed 1.06 value set in the submit function? If not you can just initialize the state in App with that and the onCalculatePaces should have access to the correct value without a state change before it.

I didn’t actually look at the numbers to figure out what is being calculated and how.

1 Like

I was wondering the same thing.

Yes sometimes it will be. It depends on how the coach decides to test. If it’s a single distance, the 1.06 represents the ideal decay / exponent for a well rounded swimmer.

If they want to determine an athletes decay rate in order to determine what they need to improve first, then they would input 2 tests, and the ‘m’ value would be determined for the individual.

I may implment an “m slider” that would allow a coach to smoothly slide from 1.0 to 1.12 which would be a range of typical values for people who have only 1 pace, and people who can muscle through for 90 seconds then can’t swim more than 3 minutes without dying.

Thanks I don’t know why the link wouldn’t show up.

Thanks i’ll check that out.

Thanks for each of yoru inputs…I stepped away from this for a few weeks, but am going to dive back in.

As long as that variable is set before the form submit calculations it should work just fine. You just can’t set a state variable and then set another state variable right after it that depends on the first one. You can use a useEffect to sync with or maybe props. But I think with the submission being the way it is, I would just have a separate control for that variable that is set before the main calculation can be done.

thanks ill try this.