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

The Checkboxlist generated by jQuery-Ajax does not function when clicked on

Updating a Mongo Record using the ID obtained from another Record's retrievalI hope this meets your needs

Leveraging the power of Material-UI and React, modify the appearance of the "carrot" icon within the

ensure that mocha does not consistently skip tests

The default skin of video.js is disrupted by a 16:8 ratio

Implement the export of components by utilizing the withStyles() and compose() functions in conjunction with Redux, Firebase, and

Using Selenium in conjunction with browsermob-proxy to generate new HAR files for redirected web pages

The function `Object.entries().map()` in TypeScript does not retain the original data types. What changes can I make to my interface to ensure it works correctly, or is there a workaround

Angular: A guide to binding to the required/ngRequired attribute

Buttons to maximize, minimize, and close individual sections on a webpage

Contact a relaxation service periodically to pause its operation

Angular.js enables seamless synchronization between contenteditable elements and the $scope object by automatically updating the

Storing various duplicates of items in local storage

Encountering an error while setting up the object spread operator Babel plugin for ES201

Trigger a function on q-select change using onChange event (Quasar Framework)

Understanding the moment when the DOM is fully rendered within a controller

HTML text not lining up with SVG text

Upon inserting Node 5, an error with the code EINVALIDTYPE occurred in npm

What is the best way to convert the information from a <SelectInput /> component or similar components into another language?

Click on the button to add a new question and watch as another row magically appears