Tips for updating the value of a key in a JavaScript object when the TextField tag's value changes

Question

Tips for updating the value of a key in a JavaScript object when the TextField tag's value changes

Here is the schema I am using for my model:

const workoutSchema = mongoose.Schema({
  workouts: [
    {
      workoutName: String,
      sets: Number,
      reps: Number,
      weight: Number,
    },
  ],
});

Below is the postData referenced in the text field.

const [postData, setPostData] = useState({
    workouts: [{ workoutName: "", sets: "", reps: "", weight: "" }],
  });

In order to access the workoutName mentioned above, I have set the value to

postData.workouts["workoutName"]

, which seems to work but I'm not entirely certain. My issue lies with the onChange property, particularly with the second argument in setPostData [workoutName]: e.target.value. I am struggling to access the workoutName key within the workouts dictionary from the schema.

<TextField
              label="Workout"
              variant="outlined"
              value={postData.workouts["workoutName"]}
              onChange={(e) =>
                setPostData({ ...postData, workoutName: e.target.value })
              }

I have attempted

workouts["workoutName"]: e.target.value

, but it results in a syntax error before the bracket, indicating that a comma was expected. See the error image. Additionally, I tried

workouts.workoutName : e.target.value

, as in other programming languages, but it did not work. How can I properly access the workoutName within the workouts object to update it with the value typed in the text field (i.e., e.target.value)?

javascript mongodb dictionary material-ui textfield

Answer 1

Answer №1

postData is a data object

Within this data object, there is a key called "workouts"

Inside the array of "workouts", each item has a property named "workout name"

To update the workout name, you can use the following code:

{...postData, workouts: [{...postData.workouts[0], workoutName: e.target.value}]}

To retrieve the workout name, you should do the following:

postData.workouts[0].name

Answer 2

postData is a data object

Within this data object, there is a key called "workouts"

Inside the array of "workouts", each item has a property named "workout name"

To update the workout name, you can use the following code:

{...postData, workouts: [{...postData.workouts[0], workoutName: e.target.value}]}

To retrieve the workout name, you should do the following:

postData.workouts[0].name

Tips for updating the value of a key in a JavaScript object when the TextField tag's value changes

Answer №1

Similar questions

Send a single piece of data using AJAX in Flask

Issues arise when using res.send() with ExpressJS and Mongoose

Responsive div that reacts to scrolling

Create a parent dropdown class that contains two separate bootstrap dropdowns nested within it

Display all keys and values in a dynamically populated object on my screen - React

When implementing v-model on a v-dialog component, it causes the element within an array to

Create a toggle effect similar to jQuery using JavaScript

When attempting to add an object to an array in a collection, there was an issue with

Why does my Javascript cross-domain web request keep failing with a Status=0 error code?

Retrieve the part of a displayed element

Exploring creative methods for incorporating images in checkboxes with CSS or potentially JavaScript

Is it possible for multiple queries executed within a websql transaction to be run concurrently?

What steps can I take to safeguard my Javascript from unauthorized access by external entities?

Repurposing Styles in JavaScript

Choosing options from Bootstrap dropdown using Protractor

Text element in SVG not displaying title tooltip

Send form data without reloading the page and connect it to a JavaScript script

Picked (chosen-js): Steps to deselect options using a variety of selectors

Having trouble with the express-stormpath login feature for users who have authenticated with their email?

Unexpected token error in TypeScript: Syntax mistake spotted in code