Tengo un formulario React con campos de entrada dinámicos que un usuario puede agregar y eliminar campos de entrada. Valido cuando envío el formulario. Si la entrada está vacía, la entrada se enfoca con useRef hook. El problema es que si tengo dos entradas vacías, entonces agrego una segunda entrada y la elimino después, obtengo typeError "No se pueden leer las propiedades de nulo (leyendo 'enfoque')". También probé con la entrada dinámica useRef, pero no puedo solucionarlo.

CódigoSandBox

Aplicación.js

 import React, { useState, useRef } from "react"; import ReactDOM from "react-dom"; import "./styles.css"; function App() { const [fields, setFields] = useState([""]); const fieldRef = useRef(); const fieldsIsValid = fields.length >= 1 && fields.every((field) => field.trim() !== ""); function handleChange(i, event) { const values = [...fields]; values[i] = event.target.value; setFields(values); } function handleAdd() { const values = [...fields]; values.push(""); setFields(values); } function handleRemove(i) { const values = [...fields]; values.splice(i, 1); setFields(values); } function submitHandler(event) { event.preventDefault(); if (!fieldsIsValid) { if (fields.length >= 1) { fieldRef.current.focus(); return; } return; } console.log(fields); } return ( <div className="App"> <h1>Hello CodeSandbox</h1> <form onSubmit={submitHandler}> <button type="button" onClick={() => handleAdd()}> Add Input </button> {!fieldsIsValid && <p className="error">Input is required</p>} {fields.map((field, idx) => { return ( <div key={`${"input"}-${idx}`}> <input type="text" placeholder="Enter text" value={field || ""} ref={fieldRef} onChange={(e) => handleChange(idx, e)} /> <button type="button" onClick={() => handleRemove(idx)}> X </button> </div> ); })} <button className="margin-top" type="submit"> Submit </button> </form> </div> ); } export default App;