Skip to content

yoniaiz/react-generate-unique-key-for-map

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React generate unique key for map

Small helper library to generate unique keys for map in react when you don't have unique property.

Benefits

The unique key stays persistent every re-render and won't cause rerenders of the component. So its a better alternative then passing just a unique generator function that will change the key every re-render or passing the index of the item.

example

Usage/Examples

import Component from "my-project";
import { useGetUniqueKey } from "react-generate-unique-key-for-map";

const arrOfRandomObjects = [
  { age: 11, name: "Joni" },
  { age: 11, height: 1.8 },
  { age: 12, weight: 84 },
];

function App() {
  // works with any type of data - arrays, objects, strings, numbers...
  const getUniqueKey = useGetUniqueKey();

  return (
    <>
      {arrOfRandomObjects.map((obj) => (
        <Component age={obj.age} key={getUniqueKey(obj)} />
      ))}
    </>
  );
}

About

Create unique keys for map elements that don't have unique property

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published