This is my React Hook:
function Student(props){
const [open, setOpen] = useState(false);
const [tags, setTags] = useState([]);
useEffect(()=>{
let input = document.getElementById(tagBar);
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById(tagButton).click();
}
});
},[tags])
const handleClick = () => {
setOpen(!open);
};
function addTag(){
let input = document.getElementById(tagBar);
let tagList = tags;
tagList.push(input.value);
console.log("tag");
console.log(tags);
console.log("taglist");
console.log(tagList);
setTags(tagList);
}
const tagDisplay = tags.map(t => {
return <p>{t}</p>;
})
return(
<div className="tags">
<div>
{tagDisplay}
</div>
<input type='text' id={tagBar} className="tagBar" placeholder="Add a Tag"/>
<button type="submit" id={tagButton} className="hiddenButton" onClick={addTag}></button>
<div>
);
What I am looking to do is be able to add a tag to these student elements (i have multiple but each are independent of each other) and for the added tag to show up in the tag section of my display. I also need this action to be triggerable by hitting enter on the input field.
For reasons I am not sure of, I have to put the enter binding inside useEffect (probably because the input element has not yet been rendered).
Right now when I hit enter with text in the input field, it properly updates the tags/tagList variable, seen through the console.logs however, even though I set tags to be the re-rendering condition in useEffect (and the fact that it is also 1 of my states), my page is not updating with the added tags
You are correct, the element doesn't exist on first render, which is why useEffect can be handy. As to why its not re-rendering, you are passing in tags as a dependency to check for re-render. The problem is, tags is an array, which means it compares the memory reference not the contents.
var myRay = [];
var anotherRay = myRay;
var isSame = myRay === anotherRay; // TRUE
myRay.push('new value');
var isStillSame = myRay === anotherRay; // TRUE
// setTags(sameTagListWithNewElementPushed)
// React says, no change detected, same memory reference, skip
Since your add tag method is pushing new elements into the same array reference, useEffect thinks its the same array and is not re-triggers. On top of that, React will only re-render when its props change, state changes, or a forced re-render is requested. In your case, you aren't changing state. Try this:
function addTag(){
let input = document.getElementById(tagBar);
let tagList = tags;
// Create a new array reference with the same contents
// plus the new input value added at the end
setTags([...tagList, input.value]);
}
If you don't want to use useEffect I believe you can also use useRef to get access to a node when its created. Or you can put the callback directly on the node itself with onKeyDown or onKeyPress
I can find few mistake in your code. First, you attaching event listeners by yourself which is not preferred in react. From the other side if you really need to add listener to DOM inside useEffect you should also clean after you, without that, another's listeners will be added when component re-rendered.
useEffect( () => {
const handleOnKeyDown = ( e ) => { /* code */ }
const element = document.getElementById("example")
element.addEventListener( "keydown", handleOnKeyDown )
return () => element.removeEventListener( "keydown", handleOnKeyDown ) // cleaning after effect
}, [tags])
Better way of handling events with React is by use Synthetic events and components props.
const handleOnKeyDown = event => {
/* code */
}
return (
<input onKeyDown={ handleOnKeyDown } />
)
Second thing is that each React component should have unique key. Without it, React may have trouble rendering the child list correctly and rendering all of them, which can have a bad performance impact with large lists or list items with many children. Be default this key isn't set when you use map so you should take care about this by yourself.
tags.map( (tag, index) => {
return <p key={index}>{tag}</p>;
})
Third, when you trying to add tag you again querying DOM without using react syntax. Also you updating your current state basing on previous version which can causing problems because setState is asynchronous function and sometimes can not update state immediately.
const addTag = newTag => {
setState( prevState => [ ...prevState, ...newTage ] ) // when you want to update state with previous version you should pass callback which always get correct version of state as parameter
}
I hope this review can help you with understanding React.
function Student(props) {
const [tags, setTags] = useState([]);
const [inputValue, setInputValue] = useState("");
const handleOnKeyDown = (e) => {
if (e.keyCode === 13) {
e.preventDefault();
addTag();
}
};
function addTag() {
setTags((prev) => [...prev, inputValue]);
setInputValue("");
}
return (
<div className="tags">
<div>
{tags.map((tag, index) => (
<p key={index}>{tag}</p>
))}
</div>
<input
type="text"
onKeyDown={handleOnKeyDown}
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
placeholder="Add a Tag"
/>
<button type="submit" onClick={addTag}>
ADD
</button>
</div>
);
}
I am new to react and exploring different ways of creating a simple todo app. I am current getting the error "Warning: Each child in a list should have a unique "key" prop."
Everything seems to be working okay however I must be doing something wrong.
class App extends Component {
constructor(props) {
super(props)
this.state={
list: [],
item:{
body: '',
id: ''
}
}
}
handleInput(e) {
this.setState ({
item:{
body: e.target.value,
key: Date.now()
}
})
}
addItem(e) {
e.preventDefault();
const newItem = this.state.item
const list = [...this.state.list]
list.push(newItem)
console.log(list)
this.setState ({
list,
item:{
body: '',
id: ''
}
})
}
render() {
return (
<div className="App">
<h1>To Do List</h1>
<form>
<input
type='text'
placeholder='enter a new Todo'
value={this.state.item.body}
onChange={this.handleInput.bind(this)}
>
</input>
<button onClick={this.addItem.bind(this)}>
submit
</button>
</form>
<br/>
{this.state.list.map(item => {
return (
<li>{item.body}</li>
)
})}
</div>
);
}
}
export default App;
If anyone could help that would br great/explaing why this error is happening that would be great.
Short answer: give your <li>{item.body}</li> a unique key. Like <li key={item.id}>{item.body}</li>
Also check you handleInput. Did you mean id: Date.now()?
handleInput(e) {
this.setState ({
item:{
body: e.target.value,
key: Date.now() // <--- id: Date.now()
}
})
}
Explanation: See https://stackoverflow.com/a/43892905
You should give each row a specific id which is unique. You can also use index beside item in arrow function if you are not sure the id is unique,
like this code:
{ this.state.list.map((item, index) => {
return (
<li key={index}>{item.body}</li>
)
}))}
To give a unique identity to every element inside the array, a key is required. Keys help React identify which items have changed (added/removed/re-ordered).
i.e.
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
Please bear in mind that react will run into performance degradation and unexpected behaviour if unstable keys are used.
Take a quick look at the official documentation for more illustration: https://reactjs.org/docs/lists-and-keys.html
So I just realised it was a typo, my "key" value in the handleInput method was incorrectly named.
I was getting this error when using react-bootstrap's Accordion component, it makes no use of <ul> or <li> tags, so it had me very confused.
If it helps anyone, a way to debug this is to add a key={0} or something like that to every component and tag. Eventually, the warning will change and you'll be able to pinpoint where the problem resides.
Two main issues.
(1) onClick needs to update two items in my state
(2) I need to filter state #2 to count the number of times a string appears and render it if it equals the length of state#1
More Detail:
I am mapping through my objects and rendering a button for each. I need the onClick to setState of two different attributes so i pass value={item.item} to update state selectedItems , and data-matches={item.matches} to update state of matchesList.
-- note that item.item is a string and item.matches is an array of strings.
When I call onClick to update the state, the value works fine, but the data-matches creates a weird object which i cant iterate over and this is why thats a problem...
I need to map through the data-matches state and count each instance of a string, if the count of that particular string is equal to the length of selectedItems state, then I need to render that.
If this is confusing to you, it's because I am completely lost and new to this. Maybe its worth mentioning that my props are coming from Redux..
Example of some objects for reference
{
'item': 'apple',
'matches': ['beef', 'bacon', 'cheese', 'carrot'],
},
{
'item': 'carrot',
'matches': ['apple', 'bacon', 'goat'],
},
export class Items extends Component {
constructor(props) {
super(props);
this.state = {
selectedItems: [],
firstStep: true,
matchesList: []
};
this.selectItems = this.selectItems.bind(this);
this.filterMatches = this.filterMatches.bind(this);
}
selectItems(event) {
this.setState({
selectedItems: [...this.state.selectedItems, event.target.value],
firstStep: false,
matchesList: [...this.state.matchesList, event.target.dataset.matches]
});
}
Below, in the col 'All", I am mapping through my state selectedItems which is an array, so I can grab the actual object from props which is the same name. I then map over the matches array of that object, and grab the actual object that has the same name as the matches...
in the col 'Cross Referenced", I am mapping over the state updated from the onClick. This is where I need to filter.. I'll show you my attempt at that after this code block.
render() {
return (
<Fragment>
<div className="col">
<div className="row">
<div className="col-5">
<h1>All</h1>
{this.state.selectedItems.map(selected =>
this.props.items.map(item =>
item.item == selected
? item.matches.map(match =>
this.props.items.map(item =>
item.item == match ? (
<div>
<p>{item.item}</p>
<button
key={item.item}
value={item.item}
data-matches={item.matches}
onClick={this.selectItems}
>
Select
</button>
</div>
) : null
)
)
: null
)
)}
</div>
<div className="col-5">
<h1>Cross Referenced</h1>
{this.state.matchesList.map(matches => (
<p>{matches}</p>
))}
</div>
</div>
</div>
)}
</div>
</Fragment>
);
}
}
My attempt at filtering, even though the matchesList is not right.
filterMatches(matchesList, selectedItems) {
let arr1 = matchesList;
let arr2 = selectedItems;
let obj = arr1.reduce((op, inp) => {
let key = inp;
op[key] = op[key] || 0;
op[key]++;
return op;
}, {});
let final = Object.keys(obj).filter(key => {
return obj[key] === arr2.length;
});
return final;
}
in the render
<div className="col-5">
<h1>cross referenced</h1>{this.state.matchesList.filter(this.filterMatches(this.state.matchesList, this.state.selectedItems)).map(matches => (
<p>{matches}</p>
))}
</div>
</div>
I tried out the data-matches thing, and it looks to me like event.target.dataset.matches was coming out to be a string (Not an array of strings, one big CSV string). Try doing it the following way:
class YourComponent extends React.Component {
state = {...};
selectItems = (item, matches) => {
this.setState({
selectedItems: [...this.state.selectedItems, item],
firstStep: false,
matchesList: [...this.state.matchesList, ...matches]
});
}
render() {
return (
{...}
{this.props.items.map(item => (
<button
key={item.item}
value={item.item}
onClick={() => this.selectItems(item.item, item.matches)}
>
Select
</button>
))}
{...}
);
}
}
Actually I think I see what your issue is, the filter is working fine and it's already giving you your array of ["bacon"]. Try getting rid of the outer filter, I don't see a point to it being there.
const YourComponent = props => (
{...}
{this.filterMatches(this.state.matchesList, this.state.selectedItems).map(matches => (
<p>{matches}</p>
))}
{...}
);
This is my practice demo, it's about todo list.
You can see, when I confirm a task. It's will be gone, but next task state is checked.
How can I fix? Thanks in advance.
code:
import React, { Component } from 'react';
import InpuText from './component/InpuText';
class Note extends Component {
constructor(props) {
super(props);
this.state = {
inputdata: 'no data',
noteData: ''
}
}
componentWillMount() {
if(localStorage.getItem('note')) {
this.setState({
noteData: JSON.parse(localStorage.getItem('note')).details
})
}
}
getInputValue(getValue) {
this.setState({
inputdata: getValue
})
if(localStorage.getItem('note')) {
this.state.noteData.push({
text: getValue
})
let note = {
details: this.state.noteData
}
localStorage.setItem('note', JSON.stringify(note));
}else {
let note = {
details: []
}
note.details.push({
text: getValue
})
this.setState({
noteData: note.details
})
localStorage.setItem('note', JSON.stringify(note));
}
}
finish(index, e) {
console.log(e.target.checked)
if(e.target.checked === true) {
this.state.noteData.splice(index, 1)
this.setState({
noteData: this.state.noteData
})
let note = {
details: this.state.noteData
}
localStorage.setItem('note', JSON.stringify(note));
}
}
render() {
return (
<div>
notepad
<InpuText getInputValue={this.getInputValue.bind(this)}/>
{/* <p>input data:{this.state.inputdata}</p> */}
<div>todo</div>
{
this.state.noteData
?
<ul>
{this.state.noteData.map((notes, i)=>(
<li key={i}>
{i}:{notes.text}
<input type="checkbox" onChange={this.finish.bind(this, i)}/>
</li>
))}
</ul>
:
<p>no task</p>
}
<div>done</div>
<ul>
<li>123</li>
</ul>
</div>
);
}
}
export default Note;
finish() is handle Array to remove the finish task.
I think this is due to a couple of things:
You use the item's index (i) as the react key. This is bad practice, because the key is not stable. As an example, consider you have three items - their keys would be 0,1,2. Then you mark the middle one as completed, rendering only two items with keys 0 and 1. However these items had keys 0 and 2 respectively during the last render, which generally means that the reconciliation will be messed up. See https://facebook.github.io/react/docs/reconciliation.html for details. In short, the keys need to stay the same between renders.
You don't specify any value for the checkbox, therefore it is uncontrolled (https://facebook.github.io/react/docs/uncontrolled-components.html), meaning that it gets checked/unchecked freely as you click on it.
These two points together lead to the behavior that you see: you click the item, it gets checked (since the input is uncontrolled), then in the following render it gets reconciled with the wrong item (because of the index-based key).
To fix this, don't use collection index as key, use some immutable unique ID from the actual items (if there is no ID, add one). Also, set the checkboxes value prop rather than leaving them uncontrolled. You could e.g. add an isComplete property to every item in the model and set the checkbox value prop to it.
I am making a React app that allows you to make a list and save it, but React has been giving me a warning that my elements don't have a unique key prop (elements List/ListForm). How should I create a unique key prop for user created elements? Below is my React code
var TitleForm = React.createClass({
handleSubmit: function(e) {
e.preventDefault();
var listName = {'name':this.refs.listName.value};
this.props.handleCreate(listName);
this.refs.listName.value = "";
},
render: function() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<input className='form-control list-input' type='text' ref='listName' placeholder="List Name"/>
<br/>
<button className="btn btn-primary" type="submit">Create</button>
</form>
</div>
);
}
});
var ListForm = React.createClass({
getInitialState: function() {
return {items:[{'name':'item1'}],itemCount:1};
},
handleSubmit: function(e) {
e.preventDefault();
var list = {'name': this.props.name, 'data':[]};
var items = this.state.items;
for (var i = 1; i < items.length; i++) {
list.data.push(this.refs[items[i].name]);
}
this.props.update(list);
$('#'+this.props.name).remove();
},
handleClick: function() {
this.setState({
items: this.state.items.concat({'name':'item'+this.state.itemCount+1}),
itemCount: this.state.itemCount+1
});
},
handleDelete: function() {
this.setState({
itemCount: this.state.itemCount-1
});
},
render: function() {
var listItems = this.state.items.map(function(item) {
return (
<div>
<input type="text" className="list-form" placeholder="List Item" ref={item.name}/>
<br/>
</div>
);
});
return (
<div>
<form onSubmit={this.handleSubmit} className="well list-form-container">
{listItems}
<br/>
<div onClick={this.handleClick} className="btn btn-primary list-button">Add</div>
<div onClick={this.handleDelete} className="btn btn-primary list-button">Delete</div>
<button type="submit" className="btn btn-primary list-button">Save</button>
</form>
</div>
)
}
});
var List = React.createClass({
getInitialState: function() {
return {lists:[], savedLists: []};
},
handleCreate: function(listName) {
this.setState({
lists: this.state.lists.concat(listName)
});
},
updateSaved: function(list) {
this.setState({
savedLists: this.state.savedLists.concat(list)
});
},
render: function() {
var lst = this;
var lists = this.state.lists.map(function(list) {
return(
<div>
<div key={list.name} id={list.name}>
<h2 key={"header"+list.name}>{list.name}</h2>
<ListForm update={lst.updateSaved} name={list.name}/>
</div>
</div>
)
});
var savedLists = this.state.savedLists.map(function(list) {
var list_data = list.data;
list_data.map(function(data) {
return (
<li>{data}</li>
)
});
return(
<div>
<h2>{list.name}</h2>
<ul>
{list_data}
</ul>
</div>
)
});
var save_msg;
if(savedLists.length == 0){
save_msg = 'No Saved Lists';
}else{
save_msg = 'Saved Lists';
}
return (
<div>
<TitleForm handleCreate={this.handleCreate} />
{lists}
<h2>{save_msg}</h2>
{savedLists}
</div>
)
}
});
ReactDOM.render(<List/>,document.getElementById('app'));
My HTML:
<div class="container">
<h1>Title</h1>
<div id="app" class="center"></div>
</div>
There are many ways in which you can create unique keys, the simplest method is to use the index when iterating arrays.
Example
var lists = this.state.lists.map(function(list, index) {
return(
<div key={index}>
<div key={list.name} id={list.name}>
<h2 key={"header"+list.name}>{list.name}</h2>
<ListForm update={lst.updateSaved} name={list.name}/>
</div>
</div>
)
});
Wherever you're lopping over data, here this.state.lists.map, you can pass second parameter function(list, index) to the callback as well and that will be its index value and it will be unique for all the items in the array.
And then you can use it like
<div key={index}>
You can do the same here as well
var savedLists = this.state.savedLists.map(function(list, index) {
var list_data = list.data;
list_data.map(function(data, index) {
return (
<li key={index}>{data}</li>
)
});
return(
<div key={index}>
<h2>{list.name}</h2>
<ul>
{list_data}
</ul>
</div>
)
});
Edit
However, As pointed by the user Martin Dawson in the comment below, This is not always ideal.
So whats the solution then?
Many
You can create a function to generate unique keys/ids/numbers/strings and use that
You can make use of existing npm packages like uuid, uniqid, etc
You can also generate random number like new Date().getTime(); and prefix it with something from the item you're iterating to guarantee its uniqueness
Lastly, I recommend using the unique ID you get from the database, If you get it.
Example:
const generateKey = (pre) => {
return `${ pre }_${ new Date().getTime() }`;
}
const savedLists = this.state.savedLists.map( list => {
const list_data = list.data.map( data => <li key={ generateKey(data) }>{ data }</li> );
return(
<div key={ generateKey(list.name) }>
<h2>{ list.name }</h2>
<ul>
{ list_data }
</ul>
</div>
)
});
It is important to remember that React expects STABLE keys, meaning you should assign the keys once and every item on your list should receive the same key every time, that way React can optimize around your data changes when it is reconciling the virtual DOM and decides which components need to re-render.
So, if you are using UUID you need to do it at the data level, not at the UI level.
Also keep in mind you can use any string you want for the key, so you can often combine several fields into one unique ID, something like ${username}_${timestamp} can be a fine unique key for a line in a chat, for example.
Keys helps React identify which items have changed/added/removed and should be given to the elements inside the array to give the elements a stable identity.
With that in mind, there are basically three different strategies as described bellow:
Static Elements (when you don't need to keep html state (focus, cursor position, etc)
Editable and sortable elements
Editable but not sortable elements
As React Documentation explains, we need to give stable identity to the elements and because of that, carefully choose the strategy that best suits your needs:
STATIC ELEMENTS
As we can see also in React Documentation, is not recommended the use of index for keys "if the order of items may change. This can negatively impact performance and may cause issues with component state".
In case of static elements like tables, lists, etc, I recommend using a tool called shortid.
1) Install the package using NPM/YARN:
npm install shortid --save
2) Import in the class file you want to use it:
import shortid from 'shortid';
2) The command to generate a new id is shortid.generate().
3) Example:
renderDropdownItems = (): React.ReactNode => {
const { data, isDisabled } = this.props;
const { selectedValue } = this.state;
const dropdownItems: Array<React.ReactNode> = [];
if (data) {
data.forEach(item => {
dropdownItems.push(
<option value={item.value} key={shortid.generate()}>
{item.text}
</option>
);
});
}
return (
<select
value={selectedValue}
onChange={this.onSelectedItemChanged}
disabled={isDisabled}
>
{dropdownItems}
</select>
);
};
IMPORTANT: As React Virtual DOM relies on the key, with shortid every time the element is re-rendered a new key will be created and the element will loose it's html state like focus or cursor position. Consider this when deciding how the key will be generated as the strategy above can be useful only when you are building elements that won't have their values changed like lists or read only fields.
EDITABLE (sortable) FIELDS
If the element is sortable and you have a unique ID of the item, combine it with some extra string (in case you need to have the same information twice in a page). This is the most recommended scenario.
Example:
renderDropdownItems = (): React.ReactNode => {
const elementKey:string = 'ddownitem_';
const { data, isDisabled } = this.props;
const { selectedValue } = this.state;
const dropdownItems: Array<React.ReactNode> = [];
if (data) {
data.forEach(item => {
dropdownItems.push(
<option value={item.value} key={${elementKey}${item.id}}>
{item.text}
</option>
);
});
}
return (
<select
value={selectedValue}
onChange={this.onSelectedItemChanged}
disabled={isDisabled}
>
{dropdownItems}
</select>
);
};
EDITABLE (non sortable) FIELDS (e.g. INPUT ELEMENTS)
As a last resort, for editable (but non sortable) fields like input, you can use some the index with some starting text as element key cannot be duplicated.
Example:
renderDropdownItems = (): React.ReactNode => {
const elementKey:string = 'ddownitem_';
const { data, isDisabled } = this.props;
const { selectedValue } = this.state;
const dropdownItems: Array<React.ReactNode> = [];
if (data) {
data.forEach((item:any index:number) => {
dropdownItems.push(
<option value={item.value} key={${elementKey}${index}}>
{item.text}
</option>
);
});
}
return (
<select
value={selectedValue}
onChange={this.onSelectedItemChanged}
disabled={isDisabled}
>
{dropdownItems}
</select>
);
};
Hope this helps.
Do not use this return `${ pre }_${ new Date().getTime()}`;. It's better to have the array index instead of that because, even though it's not ideal, that way you will at least get some consistency among the list components, with the new Date function you will get constant inconsistency. That means every new iteration of the function will lead to a new truly unique key.
The unique key doesn't mean that it needs to be globally unique, it means that it needs to be unique in the context of the component, so it doesn't run useless re-renders all the time. You won't feel the problem associated with new Date initially, but you will feel it, for example, if you need to get back to the already rendered list and React starts getting all confused because it doesn't know which component changed and which didn't, resulting in memory leaks, because, you guessed it, according to your Date key, every component changed.
Now to my answer. Let's say you are rendering a list of YouTube videos. Use the video id (arqTu9Ay4Ig) as a unique ID. That way, if that ID doesn't change, the component will stay the same, but if it does, React will recognize that it's a new Video and change it accordingly.
It doesn't have to be that strict, the little more relaxed variant is to use the title, like Erez Hochman already pointed out, or a combination of the attributes of the component (title plus category), so you can tell React to check if they have changed or not.
edited some unimportant stuff
Let React Assign Keys To Children
You may leverage React.Children API:
const { Children } = React;
const DATA = [
'foo',
'bar',
'baz',
];
const MyComponent = () => (
<div>
{Children.toArray(DATA.map(data => <p>{data}</p>))}
</div>
);
ReactDOM.render(<MyComponent />,document.getElementById("root"));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
To add the latest solution for 2021...
I found that the project nanoid provides unique string ids that can be used as key while also being fast and very small.
After installing using npm install nanoid, use as follows:
import { nanoid } from 'nanoid';
// Have the id associated with the data.
const todos = [{id: nanoid(), text: 'first todo'}];
// Then later, it can be rendered using a stable id as the key.
const todoItems = todos.map((todo) =>
<li key={todo.id}>
{todo.text}
</li>
)
Another option is weak-key: https://www.npmjs.com/package/weak-key
import weakKey from "weak-key";
const obj1 = {a : 42};
const obj2 = {b : 123};
const obj3 = {a : 42};
console.log(weakKey(obj1)); // 'weak-key-1'
console.log(weakKey(obj2)); // 'weak-key-2'
console.log(weakKey(obj3)); // 'weak-key-3'
console.log(weakKey(obj1)); // 'weak-key-1'
For a simple array of text-strings; I'm trying one of the two ways:
1. encodeURI which is available on both; NodeJS and browser
const WithEncoder = () => {
const getKey = useCallback((str, idx) => encodeURI(`${str},${idx}`), [])
return (
<div>
{["foo", "bar"].map((str, idx) => (
<div key={getKey(str, idx)}>{str}</div>
))}
</div>
)
}
2. window.btoa which is available only in browser.
const WithB2A = () => {
const getKey = useCallback((str, idx) => window.btoa(`${str}-${idx}`), [])
return (
<div>
{["foo", "bar"].map((str, idx) => (
<div key={getKey(str, idx)}>{str}</div>
))}
</div>
)
}
Depends on the situation, choose a uniqueId creator is ok when you just want render silly items, but if you render items like drag&drop etc and you haven't any uniqueId for each item, I recommend remap that data in your redux, mapper, wherever and add for each item an uniqueId (and not in the render like <Item key={...}) because React couldn't perform any check between renders (and with that all the benefits).
With that remapped that you can use that new Id in your Component.
Here is what I have done, it works for reordering, adding, editing and deleting. Once set the key is not changed, so no unnecessary re-render. One PROBLEM which may be a show stopper for some: it requires adding a property to your object at first render say "_reactKey".
Example for functional component in psuedo TS (ie it won't run in snippets):
interface IRow{
myData: string,
_reactKey?:number
}
export default function List(props: {
rows: Array<IRow>
}) {
const {myRows} = props;
const [nextKey, setNextKey] = useState(100);
const [rows, setRows] = useState<Array<IRow>|undefined>();
useEffect(function () {
if (myRows) {
for (let row of myRows){
if (!row._reactKey){
row._reactKey = nextKey;
setNextKey(nextKey+1);
}
}
setRows(myRows);
} else if (!rows) {
setRows([]);
}
}, [myRows, columns]);
addRow(){
let newRow = { blah, blah, _reactKey : nextKey};
setNextKey(nextKey+1);
rows.push(newRow);
setRows({...rows});
}
function MyRow(props:{row:IRow}){
const {row} = props;
return <tr><td>{row._reactKey}</td><td>row.myData</td></tr>
}
return <table>
<tr><th>Index</th><th>React Key</th><th>My Data</th></tr>
rows.map((row, key)=>{
return <MyRow key={row._reactKey} row={row} />
}
</table>
}
I don't use react too much, but the last time I saw this issue I just created a new state array, and tracked the keys there.
const [keys, setKeys] = useState([0]);
const [items, setItems] = useState([value: "", key: 0,])
Then when I add a new item to list, I get the last key from the keys array, add 1, then use setKeys to update the keys array. Something like this:
const addItemWithKey = () => {
// create a new array from the state variable
let newKeyArr = [...keys];
// create a new array from the state variable that needs to be tracked with keys
let newItemArr = [...items];
// get the last key value and add 1
let key = newKeyArr[newKeyArr.length-1] + 1;
newKeyArr.push(key);
newItemArr.push({value: "", key: key,});
// set the state variable
setKeys(newKeyArr);
setItems(newItemArr);
};
I don't worry about removing values from the keys array because it's only being used for iterating in the component, and we're trying to solve for the case where we remove an item from the list and/or add a new item. By getting the last number from the keys array and adding one, we should always have unique keys.
import React, {useState} from 'react';
import {SafeAreaView,ScrollView,StyleSheet,Text,View,Dimensions} from 'react-native';
const {width}=Dimensions.get('window');
function sayfalar(){
let pages=[]
for (let i = 0; i < 100; i++) {
pages.push(<View key={i} style={styles.pages}><Text>{i}</Text></View>)
}
return pages
}
const App=()=>{
return(
<View style={styles.container}>
<ScrollView horizontal={true} pagingEnabled={true}>
{sayfalar()}
</ScrollView>
</View>
)
}
const styles = StyleSheet.create({
container:{
flexDirection:'row',
flex:1
},
pages:{
width:width
}
})
export default App;
You can use react-html-id to generate uniq id easely : https://www.npmjs.com/package/react-html-id
Use the mapped index (i)
things.map((x,i) => {
<div key=i></div>
});
Hope this helps.
The fastest solution in 2021 is to use uniqid: Go to https://www.npmjs.com/package/uniqid for more info but to sum up:
First in your terminal and your project file: npm install uniqid
Import uniqid in your project
Use it in any key that you need!
uniqid = require('uniqid');
return(
<div>
<div key={ uniqid() } id={list.name}>
<h2 key={ uniqid() }>{list.name}</h2>
<ListForm update={lst.updateSaved} name={list.name}/>
</div>
</div>
)
});
I am using this:
<div key={+new Date() + Math.random()}>