Tengo un componente dinámico con TextField, pero cuando coloco accesorios clave en div parent, TextField siempre pierde el foco después de escribir 1 carácter, si elimino accesorios clave, todo normalmente. Aquí mi código de componente.
<div key={uuid()} style={{ display: 'flex', alignItems: 'center', marginBottom: Dimens.px10 }}> <TextField style={{ marginRight: Dimens.px20 }} fullWidth required={props.required} id="outlined-textarea" defaultValue={props.data} autoComplete='off' label={props.label} placeholder={props.label} onChange={props.onChange} /> <div style={{ width: 50, maxWidth: 40 }}> <CButton outline isDriver label={<p style={{ fontWeight: 'bold', margin: 0, padding: 0 }}>-</p>} onClick={props.onDeleteClick} /> </div> </div>¿Cómo pudo pasar esto?
Las claves deben ser estables, <div key={uuid()}> asigna una nueva clave.
Si no son estables, React no puede entender que esto podría ser lo mismo que antes y luego solo se vuelve a renderizar. Esa es la razón por la que si quita la llave, entonces todo funciona bien.