dynamicFields.js

import { useState } from "react";

export default function DynamicFields() {
  const [skills, setSkills] = useState([""]);

  const handleChange = (index, value) => {
    setSkills((prev) =>
      prev.map((skill, i) => (i === index ? value : skill))
    );
  };

  const addField = () => {
    setSkills((prev) => [...prev, ""]);
  };

  const removeField = (index) => {
    setSkills((prev) => prev.filter((_, i) => i !== index));
  };

  return (
    <div>
      <h2>Skills</h2>

      {skills.map((skill, index) => (
        <div key={index}>
          <input
            value={skill}
            onChange={(e) => handleChange(index, e.target.value)}
            placeholder="Enter skill"
          />

          <button onClick={() => removeField(index)}>Remove</button>
        </div>
      ))}

      <button onClick={addField}>Add Skill</button>

      <pre>{JSON.stringify(skills, null, 2)}</pre>
    </div>
  );
}