score:1
keys are used for lists to help react identify which items have changed, been added or been removed. in your case you're using the name as the key, so whenever you update the value of your input field, the key is updated as well. react detects this as an element being removed, and a new element being added.
so instead of just updating the value, react actually removes the input field, and add an input field again, which is why the input loses focus after updating one of the inputs.
score:2
when you are mapping through names
which is an array of input values.
you are rendering the inputs in the following way.
return (
<div>
{/***** the key is wrong!!! */}
{names.map((n, i) => (
<input key={n} value={n} onchange={(e) => setname(i, e.target.value)} />
))}
</div>
);
as soon as you change the input, setnames
is triggered through your setname
via onchange
.
this means react
will now check for new items generated.
since key={n}
would change the input itself i.e a new input element is generated and updated now in the dom, that is why you lose focus each time when you change it.
this is not the case, when you are using index
as the key.
because then the keys of input remain same and only the value changes.
however, there are some caveats using index as keys too.
you can read more about them here:
Source: stackoverflow.com
Related Query
- Understanding consequences of using bad react keys
- Using API keys in a react app
- Does React handle keys automatically when using React.Children.map?
- Advantages and Understanding of using Currying Function pattern in onClick Event handler in React
- Getting duplicates when Incrementing & Decrementing using the Arrow keys with React JS
- understanding react props and keys
- React re renders all items in array when new items are added despite using unique keys for all items
- Print automatically the JSON Keys only instead of its values Using React
- Using React and react-slick, I am just having a general hard time understanding how to use it
- How to iterate through list of items in React list using arrow keys
- How do you replace data multiple times with an array of keys using a react hook?
- POST: 400 BAD REQUEST on REACT APP - using Express
- 400 BAD REQUEST when POST using Axios in React with Nodejs/Express
- How to output array with keys to my html file from promise function using React
- State awaiting in React - I'm having trouble understanding the error while using 'useCallback()'
- Getting Bad request for POST request using Axios and CORS in Django and react app
- POST 400: Bad request - Using Django REST API and React
- React pass array of objects to component which are using different keys
- Trying to add an array of objects using react useState but getting the error 'Objects are not valid as a React child (found: object with keys {})'
- 400 BAD REQUEST when POST using Axios in React
- how to make dropdown work using up and down arrow keys in react
- How to convert an array of dictionaries into an array of keys using react
- React keys - rendering 2 duplicate items in a list- how to avoid same key warning as same items are intended without using index as key?
- Programmatically navigate using React router
- Understanding unique keys for array children in React.js
- What is the difference between using constructor vs getInitialState in React / React Native?
- How to fix missing dependency warning when using useEffect React Hook
- What's the difference between "super()" and "super(props)" in React when using es6 classes?
- Programmatically navigate using react router V4
- OnChange event using React JS for drop down
More Query from same tag
- How do I change localhost:3000 to custom.domain in react
- localStorage - get and set
- Flattening object and limitting number of nesting
- Correct way of using useState hook on radio buttons
- Better code implementation when mapping in React.js
- Desctructuring data-set in React
- Get from api react with useState, useEffect
- Forward and backward pagination with relay js
- React Router 4 - Different Layouts?
- Access nested array items in javascript
- How to structure my API call, and where to put the key and query?
- React v15.4 to v16 migration problems
- send form values from child function component to parent class component
- Cant type in an input field of a form in React js
- React Bootstrap Tabs Component's transition prop not working
- Deploying new contract to etherium network with web3.js
- type for useRef on a dynamic component
- Getting NextJS Image Component & @svgr/webpack to play nicely together
- react-rte/draft-js: blockRenderMap not affecting the actual editor state
- Extract String from Formatted Message
- React router page redirect not correctly?
- Remove an object from an array of if not Present in Array
- React Router v6 onclick
- React - ul with onBlur event is preventing onClick from firing on li
- How to dynamically set height of a component whose height is an animated value post-animation?
- handling error response from express to react
- React TypeScript: Set initial value for input with useRef
- How to load initial data from rails to redux
- Fails to process large files
- How do I avoid 'Function components cannot be given refs' when using react-router-dom?