Question

0

158

Views

mui TextField in React loosing focus every typing one character after put key props in <div> parent

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?

7 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-05T05:12:54.250Z

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.