I have a dynamic component with TextField, but when i put key props in div parent, the TextField always lose focus after typing 1 character, if i delete key props, all normaly. Here my component code.
<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>
How could this happen?
Keys must be stable, <div key={uuid()}> assigns new key.
If they're not stable then React cannot understand that this might be the same as before and then just re-renders. That is the reason if you remove the the key then all works well.