Estado inicial
const [variation, setVariation] = useState([ { name: "", value: [""], }, ]);función al hacer clic en el botón
const addValueField = (e, index) => { e.preventDefault(); const field = [...variation]; field[index].value.push(""); setVariation(field); };representación html:
<div> {variation.map((value, index) => { return ( <div className="form-control"> <input key={index} className="bg-base-200 m-1 shadow appearance-none border rounded text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="text" placeholder="Enter Variation Type" /> <div className="form-control"> {variation[index].value.map((value, i) => { return ( <input type="text" key={i} className="bg-base-200 m-1 shadow appearance-none border rounded text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Enter Value" /> ); })} <button onClick={(e, index) => addValueField(e, index)}> Add another value </button> </div> </div> ); })} </div>Cuando se llama a addValueField(e,index) al hacer clic en el botón, no selecciona el índice del mapa principal(), pero el botón está dentro del alcance del mapa principal(), por lo que no pasa el índice a la función y se genera un error.
onClick no te da el index . Tienes que obtener el índice del map directamente si lo usas como
<button onClick={(e) => addValueField(e, index)}> Add another value </button>; y puede establecer el estado de variation como
const addValueField = (e, index) => { e.preventDefault(); setVariation((state) => state.map((o, i) => (i === index ? { ...o, value: [...o.value, ""] } : o)) ); };