Hello, I’m in the process of trying to add an enhancement to an application I’ve developed in React. I have a form that takes in employee data but it also uses the employee id as a foreign key to tie the request to the employee. However, I’m running into some sort of race condition because I can console the value that is pulled from context and it is correct. However, when I set up the form object, it takes the initial value to be empty. I’ve tried to use conditional rendering, declare the variable ahead of time, and add a useeffect based on the employee.id. I’m still receiving the same result. I’m guessing that this is something simple because when I make changes and save the file, the console looks right until I refresh or re-render the page. Anyone got any ideas? Please see attachments
I have built a Time Off Request application in React.js and I’m now adding the ability to insert comments by the requester. The new request form takes in values based on the employee that is logged in and the employee enters the date they want to take off along with the number of hours.
When the request is added to the request database, it takes in the employee id as a foreign key. I’m making a user input to be able to add a comment to the bottom of the new request page. The comment will be added to a separate database using the request id and employee id as foreign keys.
The code and the functions are working properly, but when the page is refreshed or reloaded, the employee id’s initial value is undefined because it is blank. I know that it’s a race condition that I’m running in to, but to this point, I have not found a solution.
I’ve tried using conditional rendering based on employee info and it comes back undefined. I’ve tried initializing the employee id after it’s been brought in through context with the same result and I’ve tried calling it as props directly into the form values. When I log the id value in the console, it is correct both before and after the formValues are declared.
