bbq | Object oriented acceptance testing using personas | Functional Testing library

I am building a website with React. Currently I have created function that renders elements and does PUT fetch call to API I created in Node.js. Here is how it looks like:

End Goal: To have a macOS app to monitor the temperature values from my bluetooth bbq probe, refreshing the data every X mins to keep an eye on it whilst at my desk.

macOS App

JSON structure

I have spent whole day trying to figure this out. I want to update course recipes from my database (MongoDB) using my REST API call (Node.js with Express) by sumbiting input fields with new values of the recipe. I tried to show previous values by using input value="", but as I learned this makes it to be static. I tried to change it into dynamic accordingly to what I found online however none of tutorials I found would show what I am looking for. As you can see in code below I am trying to PUT new data that was previously set using setState(). Sadly I do not know how can I do it like this. Could you tell me if it is even possible and if so where can I learn to do it?

Here is code from React:

I am working on a project in which I need to post a new Course to my API. I tested this with POSTMAN and API works just fine, however when I try to post data using react fetch data is corrupted. While sending single strings like dishName: "pizza" works just fine and is shown in database I cannot manage to send an array of objects. I tried to do it in many ways like:

Struggling to understand the Regex needed for this form reading several forum posts. Hoping someone who's an expert can provide a quick answer to this.

I have created a script with unique combinations, but I'm stuck on how to go about writing it into a csv file. Right now it's just printing out in my command line and hard to get a good grasp of the data.

My code:

I've written some JavaScript function (selectMeal) to loop 7 times randomly selecting 1 item from an array (tempMealList) then push the item to another Array (dinnersPicked). Once the items been added to the new array (dinnersPicked) it's then removed from the original array (tempMealList) to avoid it from being selected again.

In the console, each run of this function (selectMeal) yields no issue, but when I trigger the function on a button click in HTML, each time the buttons clicked the array being used seems to be permanently altered, with the items randomly selected on the first run of the function not being considered on the second click and similarly for any successive click, any item previously shown is not considered.

I've tried to resolve this in the function by redefining the variables at the start of the function to reset the array being considered on each click but this doesn't seem to work.

What am I doing wrong and how can I make sure that with every click the original array is considered?

Here is the code:

Somewhat like a ebay search page like this enter image description here

in my code, only the first listed item looks just like the image above, but every picture after floats to the right side of the page, but the text stays on left. I want it to look like this:

[]-list

[] -list

[] -list

with the code I have, the image in the second div is pushed to the right side. I want all images and text aligned underneath each other to look somewhat like the ebay layout

I am trying to create a tibble that contain property_id and the facilities columns with the true or false values in them. I have tried the following but not able to proceed further.