Repeatedly copying data from one row to another in TypeScript

Within my React TypeScript component, I am working with an array of objects. Each row in the array contains a repeat button, and I am looking to create a function that will copy the data from the current row and paste it into all remaining rows. https://i.sstatic.net/r05Tu.png

When the repeat button on a particular row is clicked, the function should take the year and option values from that row and insert them into the subsequent rows. For example, if there are 5 rows and the button on the 3rd row is clicked, the data will be copied into the 4th and 5th rows. Similarly, if the button on the 4th row is clicked, the data will be copied into the 5th row.

const repeatData = (index: number) => {
setSubjects((s) => {
  const newState = [...subjects];
  const clickedRow = { ...subjects[index] };
  index = index + 1;
  while (index < subjects.length) {
    const currentRow = { ...subjects[index] };
    currentRow.Type = clickedRow.Type;
    currentRow.Year = clickedRow.Year;
    currentRow.Option = clickedRow.Option;
    newState.splice(index, 1, currentRow);
  }
  return newState;
});

};

  const repeatData = (event: SyntheticEvent, index: number) => {
setSubjects((s) => {
  event.preventDefault();
  const newState = [...subjects];
  const clickedRow = { ...subjects[index] };
  while (index < subjects.length) {
    const currentRow = { ...subjects[index] };
    index = index + 1;
    currentRow.Type = clickedRow.Type;
    currentRow.Option = clickedRow.Option;
    currentRow.Year = clickedRow.Year;
    newState.splice(index, 1, currentRow);
  }
  return newState;
});

};

Answer №1

  const updateData = (event: SyntheticEvent, position: number) => {
setItems((items) => {
  event.preventDefault();
  const modifiedState = [...items];
  const selectedRow = { ...items[position] };
  while (position < items.length) {
    const currentRow = { ...items[position] };
    position = position + 1;
    currentRow.Type = selectedRow.Type;
    currentRow.Option = selectedRow.Option;
    currentRow.Year = selectedRow.Year;
    modifiedState.splice(position, 1, currentRow);
  }
  return modifiedState;
});

};

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

Experimenting with retrieving input from other components while implementing setTimeout

In continuation of the previous question (linked here), I am still working on tutorials for Angular testing using the same files. The current issue revolves around the setTimeout function. Within both ngOnInit and ngAfterViewInit, I have included a setTim ...

best way to transfer boolean variable from one angular service to another

Can anyone help me with passing a boolean value from one service to another service file in Angular? I'm encountering an issue where the boolean value is showing as undefined. I haven't been able to find any examples or documents related to this. ...

TypeScript implements strong typing for object strings

Is it possible to create a custom type in TypeScript that represents a stringified object with a specific structure? Instead of just defining type SomeType = string, I would like to define a type that looks something like this: type SomeType = Stringified ...

Unlock the door and begin typing in C programming language

I have a task in the programming language C that requires two parameters to be entered: a filename and a positive integer value k. The program will then create a new file that extracts characters from the original file at positions k, 2*k, 3*k, and so on, ...

Ways to broaden React categories for embracing html attributes as props?

When designing a component that accepts both custom props and HTML attribute props, what is the best approach for creating the interface? The ideal interface should also accommodate React-specific HTML props, such as using className instead of class. Here ...

Error message ts2322 in Typescript: The provided object is not compatible with the required type, which must include properties for id, name, and payment status

Hey there, I recently delved into the world of Typescript and React but I find myself stuck with an error that I can't seem to resolve: "Type '{ id: number, name: string, paymentStatus: string }' is not assignable to type 'InvoiceT ...

Manage interfaces and structures

I am looking to implement user roles in my application. Here is a snippet of the code I would like to use: export interface User{ name: string roles: Roles[] } interface Roles{ ADMIN: new Permissions(1,1,1,1,1), MOD: new Permissions(1,0,1,1,0,0), [. ...

Shuffle and Place indented list

I have a bunch of ideas and a list of projects. I need to choose one idea and match it with a project. I followed this guide to implement the drag and drop feature, but encountered an issue where every project gets assigned the same idea when dragging and ...

Unit Testing Angular: Passing FormGroupDirective into a Function

I am currently writing unit tests for a function that takes a parameter of type FormGroupDirective. I have been able to test most of the logic, but I'm unsure about what to pass as a parameter when calling the resetForm() function. Here is the code sn ...

Angular6 returns the result after subscribing to an HTTP POST request

Currently, I am in the process of learning angular and attempting to create a component that allows users to register through my web API. Within my component, the code on form submission looks like this: onSubmit(contactFormRef: NgForm) { const resu ...

"Encountering a 'Module Not Found' error in Node.js after

Recently, I added a node-module to my project using the command: npm install typescript --save-dev However, when I tried running: tsc Windows displayed an error message indicating that "tsc" is an unknown command. Strangely, this issue does not occur o ...

Removing click functionality in Angular 2 when utilizing [innerHTML]

Currently, I need to include HTML in my TypeScript file using the [innerHTML] tag within the template. I am attempting to add a click function within the HTML: status = "<img src='assets/hello.png' (click)='hello()' />"; Howeve ...

The observable HTTP map appears to be more of a representation rather than a concrete entity

I seem to be struggling with understanding Typescript I expected the returned observable to have a method getTitle(), but it seems to be missing. Instead, I am getting an object that resembles AttachableContentModel without that particular method. What is ...

Struggling to display data from Firebase Database in dropdown menu using Angular

Despite my extensive search efforts online, including watching YouTube videos and enrolling in Udemy courses, I have not been able to find the solution to my issue. My goal is to take an observable retrieved from Firebase and populate it into a dropdown me ...

Designing personalized plugins with Typescript in Nuxt

In my Nuxt project, I have implemented a custom plugin file that contains an object with settings called /helpers/settings: export const settings = { baseURL: 'https://my-site.com', ... }; This file is then imported and registered in /plugi ...

convert an array into a JSON object using JavaScript

Is there a way to convert the following array structure arr = [{ "a":1, "b":2, "c":c }] into a JSON object format? arr = { "a":1, "b":2, "c":c } ...

Breaking an array in JavaScript

I'm developing a pure JavaScript hangman game and facing an issue with splitting words from an array into single letters. When I split the array, I get "," for every letter. For example, when I split the word [station], it returns "s,t,a,t,i,o,n". M ...

Ensure that only numbers with a maximum of two decimal places are accepted in Angular 2 for input

On my webpage, there are several input boxes where users can enter numbers. I need to prevent them from entering more than two decimal places. Although I tried using the html 5 input Step="0.00", it didn't work as expected. I am open to any TypeScri ...

Exploring the Angular Heroes Journey: What's the significance of one being labeled with a colon while the other is identified

Setting: Angular 5+ Source: https://angular.io/tutorial Within the heroes.component.ts class, we see an assignment using a colon: export class HeroesComponent implements OnInit { heroes: Hero[]; However, in the app.component.ts class, a different as ...

The error message "Unexpected token" occurs when using async function prefix in TypeScript

Encountering an 'Unexpected token' issue in typescript while attempting to create an async function: async function test() { ... } Investigated the possibility of this error being caused by running an outdated version of node that doesn' ...