如何根据数组的名称和长度创建动态表单？

import React, { useState } from 'react';

const DynamicForm = ({ formConfig }) => {
  const [formData, setFormData] = useState({});

  const handleChange = (e, fieldName) => {
    setFormData({
      ...formData,
      [fieldName]: e.target.value,
    });
  };

  const renderFormFields = () => {
    return formConfig.map((field, index) => (
      <div key={index}>
        <label htmlFor={field.name}>{field.label}:</label>
        <input
          type={field.type}
          id={field.name}
          name={field.name}
          value={formData[field.name] || ''}
          onChange={(e) => handleChange(e, field.name)}
        />
      </div>
    ));
  };

  return (
    <form>
      {renderFormFields()}
      <button type="submit">Submit</button>
    </form>
  );
};

const App = () => {
  const formConfig = [
    { name: 'firstName', label: 'First Name', type: 'text' },
    { name: 'lastName', label: 'Last Name', type: 'text' },
    { name: 'email', label: 'Email', type: 'email' },
  ];

  return <DynamicForm formConfig={formConfig} />;
};

export default App;