Untitled

import { useState } from 'react';
import './App.css';

function App() {
  const [formFields, setFormFields] = useState({data:[
    { name: '', age: '' }
  ], presentationTopic: ''})

  const handleFormChange = (event, index) => {
    let data = [...formFields];
    data[index][event.target.name] = event.target.value;
    setFormFields([...formFields.data], data);
  }

  const submit = (e) => {
    e.preventDefault();
    console.log(formFields)
  }

  const addFields = () => {
    let object = {
      name: '',
      age: ''
    }

    setFormFields([...formFields.data, object])
  }

  const removeFields = (index) => {
    let data = [...formFields];
    data.splice(index, 1)
    setFormFields(data)
  }

  const handlePresentation = (e)=>{
    setFormFields(...formFields, {
        presentationTopic: e.target.value
      })
  }

  return (
    <div className="App">
      <form onSubmit={submit}>
          <input
                name='presentationTopic'
                placeholder='Presentation Topic'
                onChange={event => handlePresentation(event)}
                value={form.presentationTopic}
              />
        {formFields.data.map((form, index) => {
          return (
            <div key={index}>
              <input
                name='name'
                placeholder='Name'
                onChange={event => handleFormChange(event, index)}
                value={form.name}
              />
              <input
                name='age'
                placeholder='Age'
                onChange={event => handleFormChange(event, index)}
                value={form.age}
              />
              <button onClick={() => removeFields(index)}>Remove</button>
            </div>
          )
        })}
      </form>
      <button onClick={addFields}>Add More..</button>
      <br />
      <button onClick={submit}>Submit</button>
    </div>
  );
}

export default App;