Untitled

"use client";

import { useState } from "react";

export default function DynamicInput() {
  const [location, setLocation] = useState([{ country: "", address: "" }]);

  const handleChange = (e,index) => {
    let previousLocation = [...location];
    previousLocation[index][e.target.name] = e.target.value;
    setLocation(previousLocation);
  };

  const handleAddInput = () => {
    let previousLocation = [...location, { country: "", address: "" }];
    setLocation(previousLocation);
  };

  console.log(location);

  return (
    <div>
      {location?.map((loc, index) => {
        return (
          <div key={index}>
            <input
              type="text"
              className="border-2 border-black"
              placeholder="country"
              name="country"
              onChange={(e) => handleChange(e, index)}
            ></input>

            <input
              type="text"
              className="border-2 border-black"
              placeholder="address"
              name="address"
              onChange={(e) => handleChange(e, index)}
            ></input>
          </div>
        );
      })}

      <button onClick={handleAddInput}>Add new</button>
    </div>
  );
}