react-generate-unique-key-for-map
TypeScript icon, indicating that this package has built-in type declarations

1.0.3 • Public • Published

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)} />
      ))}
    </>
  );
}

Package Sidebar

Install

npm i react-generate-unique-key-for-map

Weekly Downloads

17

Version

1.0.3

License

MIT

Unpacked Size

20.6 kB

Total Files

12

Last publish

Collaborators

  • yoniaiz