How can I implement dynamic fields in a React form?

How can I implement dynamic fields in a React form?

You can use state to manage the fields and map over an array to render them dynamically. Would you like a code example?

Yes, please provide a code example.

Here's a simple example:

import React, { useState } from 'react';

const DynamicForm = () => {
  const [fields, setFields] = useState(['']);

  const handleAddField = () => {
    setFields([...fields, '']);
  };

  const handleChange = (index, value) => {
    const newFields = [...fields];
    newFields[index] = value;
    setFields(newFields);
  };

  return (
    <div>
      {fields.map((field, index) => (
        <input
          key={index}
          value={field}
          onChange={(e) => handleChange(index, e.target.value)}
        />
      ))}
      <button onClick={handleAddField}>Add Field</button>
    </div>
  );
};

This will allow you to add input fields dynamically.

How do I handle form submission with these dynamic fields?

You can handle form submission by creating a function that collects the values from the fields and processes them. Would you like to see an example?