How can I manage an array of forms in TypeScript with React?

How can I manage an array of forms in TypeScript with React?

You can manage an array of forms in TypeScript with React by using state to hold the array and mapping over it to render each form.

Can you show me a code example?

Sure! Here's a simple example:

import React, { useState } from 'react';

const FormArray = () => {
  const [forms, setForms] = useState([{ name: '' }]);

  const handleChange = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
    const newForms = [...forms];
    newForms[index].name = event.target.value;
    setForms(newForms);
  };

  const addForm = () => {
    setForms([...forms, { name: '' }]);
  };

  return (
    <div>
      {forms.map((form, index) => (
        <input
          key={index}
          value={form.name}
          onChange={(e) => handleChange(index, e)}
        />
      ))}
      <button onClick={addForm}>Add Form</button>
    </div>
  );
};

export default FormArray;

What if I want to remove a form from the array?

You can add a remove function that filters out the form you want to delete. Here's how you can do it:

const removeForm = (index: number) => {
  const newForms = forms.filter((_, i) => i !== index);
  setForms(newForms);
};

// In the return statement, add a button to remove the form:
<button onClick={() => removeForm(index)}>Remove</button>