Estoy creando una aplicación React y necesito una tabla donde cada fila contenga una entrada. Para eso, estoy usando Material-UI y Formik, pero tengo un error que cada vez que escribo algo en una de las entradas, pierdo el foco de esa entrada. Vi este error mucho en Internet, probé agregando claves, eliminando claves, usé defaultValue en lugar de value, y todo funcionó correctamente para mí.
He creado un codesandbox para esto: https://codesandbox.io/s/gracious-robinson-i69v3?file=/src/App.js
Si alguien pudiera ayudarme, se lo agradecería mucho, estoy atascado con estos problemas durante unos días.
Cada vez que sus componentes MyInput se vuelven a representar, la clave cambia porque no es determinista (usa Math.random() ). Debido a esto, React eliminará el nodo DOM existente e insertará un nuevo nodo DOM en su lugar. Su navegador ahora piensa que es otro elemento, por lo que no pone el foco en ese elemento.
No tiene que establecer la propiedad key en cada componente. Solo es necesario donde genera una matriz de elementos, por ejemplo, cuando usa map . Entonces, en su ejemplo, solo el componente Formik necesita tener la propiedad clave establecida, porque es el padre de los otros componentes dentro del ciclo.
{companies.map((company, index) => ( <Formik key={index} initialValues={{ contact_name: company.contact_name || "", contact_email: company.contact_email || "" }} onSubmit={(values) => { console.log(values); }} > {(formik) => ( ...