create dynamic fields in react

1import React, { useState } from "react";
2
3function App() {
4  const [inputList, setInputList] = useState([{ firstName: "", lastName: "" }]);
5
6  // handle input change
7  const handleInputChange = (e, index) => {
8    const { name, value } = e.target;
9    const list = [...inputList];
10    list[index][name] = value;
11    setInputList(list);
12  };
13
14  // handle click event of the Remove button
15  const handleRemoveClick = index => {
16    const list = [...inputList];
17    list.splice(index, 1);
18    setInputList(list);
19  };
20
21  // handle click event of the Add button
22  const handleAddClick = () => {
23    setInputList([...inputList, { firstName: "", lastName: "" }]);
24  };
25
26  return (
27    <div className="App">
28      <h3><a href="https://cluemediator.com">Clue Mediator</a></h3>
29      {inputList.map((x, i) => {
30        return (
31          <div className="box">
32            <input
33              name="firstName"
34              placeholder="Enter First Name"
35              value={x.firstName}
36              onChange={e => handleInputChange(e, i)}
37            />
38            <input
39              className="ml10"
40              name="lastName"
41              placeholder="Enter Last Name"
42              value={x.lastName}
43              onChange={e => handleInputChange(e, i)}
44            />
45            <div className="btn-box">
46              {inputList.length !== 1 && <button
47                className="mr10"
48                onClick={() => handleRemoveClick(i)}>Remove</button>}
49              {inputList.length - 1 === i && <button onClick={handleAddClick}>Add</button>}
50            </div>
51          </div>
52        );
53      })}
54      <div style={{ marginTop: 20 }}>{JSON.stringify(inputList)}</div>
55    </div>
56  );
57}
58
59export default App;
60