What is the best way to add an item to an array with distinct properties?

I am currently working on creating an array with different properties for each day of the week. Here is what I have so far:

const [fullData, setFullData] = useState([{index:-1,exercise:''}])

My goal is to allow users to choose exercises for a specific day, such as Monday, and store the selected exercises along with the corresponding weekday index. The desired output would look something like this:

[{index:1,exercise:'exercise1'},{index:1,exercise:'exercise2'}]

The challenge lies in properly integrating the existing exercise array and weekday variable into the code. The exercise values are stored in another array:

const [exerciseValues, setExerciseValues] = useState([]);

And the weekday index is stored as a regular variable:

let selectedWeekday_Index:number;

I have tried various solutions found on stackoverflow but have been unable to successfully implement them into my code. My latest attempt produced non-functional code. If further clarification is needed, feel free to ask and I will provide more details.

 const acceptExercises = () => {
    let selectedElements = [...exerciseValues]
    let savedData = [...fullData]
    
    selectedElements.forEach(element => {
      let copyData=savedData.map(item=>({
        [item.exercise]:element,
        [item.index]:selectedWeekday_Index
      }))
      setFullData(copyData)
    });
   }

Answer №1

To improve efficiency, I suggest considering a different method for saving your data as suggested by @iz_.

If you still prefer the current approach, you can utilize this code snippet to set your completeData:

const incorporateActivities = () => {
    setCompleteData((previous) => [
      ...previous,
      ...activityValues.map((activity) => ({
        position: selectedDay_Index,
        activity: activity,
      })),
    ]);
};

We start by duplicating the existing values using previous, then we iterate over the activityValues array to generate a list of activities with the appropriate day index. These are then spread and appended to the completeData.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the benefits of leveraging TypeScript with AWS NodeJS for improved stacktrace visibility over traditional JavaScript

I'm contemplating the idea of transitioning my existing JavaScript codebase to incorporate TypeScript in NodeJS. One aspect that I am concerned about is being able to view the stack trace in AWS CloudWatch (request log) in case an error occurs during ...

The implementation of the data source in ag grid is not functioning

Implemented an ag-grid and configured a data source. However, the data source is not being triggered. How can we execute the data source properly? HTML Code: <div class="col-md-12" *ngIf="rowData.length > 0"> <ag-grid-angular #agGrid s ...

Issue with HTTP Interceptor not being effective when making service calls

I've implemented an interceptor to automatically add headers to each HTTP request without manual intervention. However, I'm facing an issue where the service call inside my interceptor is not triggering for some reason. Below is the code snippet: ...

TypeORM's one-to-many relationship alters the primary entity once the relationship has been established

When working on my side project, I decided to implement a friend request system using NestJS + TypeORM for the backend. However, I encountered a peculiar issue where every time I tried to associate a Friend entity with a specific user, the target field of ...

What is the process of displaying an image every 5 seconds in React?

Each time you visit this URL: , a new image is displayed. I am trying to make my React component show a different image with this URL every 5 seconds, but I'm having trouble. Here is the code I have: import { useEffect, useState } from "react"; ...

The module could not be located: Unable to locate '@material-ui/core/TextField' in the project's folder

Currently working with React 18.0 and encountering compatibility issues with Material UI 5.0 despite numerous attempts to resolve it. Seeking insights into the reason behind this issue and a viable solution to effectively troubleshoot such errors. ...

Using NPM in combination with React and TypeScript to incorporate AMD modules

I am currently in the process of setting up a development environment for an application that is written in TypeScript using React. I already have existing TypeScript code that compiles to ES5 and AMD modules. My goal is to avoid any JavaScript transpilat ...

Is it normal for the Array of Observables to be empty upon initial page load, only to contain content later

Currently, I am working on integrating ngx-infinite-scroll functionality. My goal is to extract the initial 5 posts from my "posts" array and populate them into the "shownPosts" array at the beginning. Subsequently, as the user continues scrolling down, I ...

Fill out FormBuilder using data from a service within Angular2

I am working with an Angular2 model that I'm filling with data from a service. My goal is to use this model to update a form (created using FormBuilder) so that users can easily edit the information. Although my current approach works, I encounter er ...

Angular ERROR: Trying to access rating property of an undefined value

I'm encountering an issue on a website where users can vote for their favorite animal. Whenever I try to select an animal to vote for, I receive an unclear error message that has been difficult to resolve even after searching online for a solution. A ...

What is the best way to iterate over JSON data from an endpoint that contains multiple nested arrays using the .map() method?

Seeking to showcase weather API data from: () import Image from "next/image" interface Hour { time_epoch: number time: string temp_c: number temp_f: number is_day: number wind_mph: number wind_kph: number wind_deg ...

Issue with reflect metadata in Next.js edge runtime causing functional problems

Currently, I am utilizing a package in my upcoming 13 app that incorporates reflect metadata. Unfortunately, during the next build process, an error occurs for which I haven't been able to find a solution. ../../eshop-sdk-js/node_modules/reflect-metad ...

No matter the circumstances, the "Unexpected end of form" error consistently appears when attempting to upload files in Express

I'm facing a challenge in implementing a file upload API endpoint for my Express+no-stress+Typescript application. Initially, I attempted to use the express-fileupload library, but I quickly realized that it didn't integrate well with Typescript ...

Are React component properties enclosed in curly braces?

I have a new component configured like this: type customType = differentType<uniqueType1, uniqueType2, uniqueType3>; function customComponent({q}: customType) When called, it looks like this: <customComponent {...myCustomVar} />, where myCus ...

Issue with ion-select default value not being applied

In my ion-select element, I have multiple options and I want to set a default value based on the CurrentNumber when the view is loaded. Here's the code snippet: <ion-select formControlName="Level"> <ion-option [value]="level.id" *n ...

Issue with 'else if' statement in React Typescript: Unneeded 'else' block following 'return' statement

I am encountering an issue with the else if statement below. Even after removing the last pure Else statement, I am still getting an error on ElseIf from Lint. How can I fix this problem? Error message: Unnecessary 'else' after 'return&apo ...

The switch statement and corresponding if-else loop consistently produce incorrect results

I'm currently facing an issue where I need to display different icons next to documents based on their file types using Angular framework. However, no matter what file type I set as the fileExtension variable (e.g., txt or jpg), it always defaults to ...

What can be done to ensure that two separate react-native Picker components do not interfere with each other's

Encountering an issue with two Pickers in a react-native View. Whenever I select a value in one Picker, it causes the other Picker to revert back to its initial item in the list. It seems like the onValueChange function is being triggered for both Pickers ...

Difficulty encountered when combining create-react-app with typescript and immutable.js

After realizing that create-react-app now supports typescript, I encountered some issues while trying to transfer my current codebase from react-scripts-ts. Most of my classes are based on Record and cannot be constructed anymore due to errors like: Cannot ...

Prevent Promise / Property not found error in Angular2 by Instantiating Class

When working with my "export class", I encountered an issue that led to a Promise error if I didn't include this line of code: purchase = new Purchase(); right before the constructor. The error indicated that the property "name" was not found. Alth ...