react-key-index

> Generate stable, unique keys in your React components.

Play with the demo/example here here.

!react-key-index

What This Component Does

In brief:

- This package adds a permanent and unique ID to every element in an array.
- If the paramter is an array of objects, then a unique id will be created for each property.
- This permanent and unique ID can then be used as a key when iterating over the array in a React component.

Here's a sample of the IDs generated using this node module:

``javascript
[ 'jRfMcPcj',
'kRf6cEcn',
'lYf5cBcl',
'mZfKc5cv',
'n5fqcYcz',
'o2fLcZcB',
'pYfNcRcR',
'qxfPcBcJ',
'rkf0cKcK',
'v2fjc3cA',
'wpfzcvcB',
'xkf4cMcR',
'yPfzcOcE',
'zpfpcZcw',
'ADf3cvcP',
'BBf9cYcr',
'DkfKcycp',
'ERfJcmcr',
'G6fpcVcQ',
'J6fmcgc7' ]
`

Rational For Developing This Package

$3

You know that pesky error message in React telling you to specifiy a key when iterating over elements? I'm talking about situations like this:

`javascript
var arr = ["one", "two", "three"];

var list = arr.map((arr) =>


{arr}


);
`

Use `react-key-index` to generate stable, predictable react key IDs. The keys are strings of numbers and letters that don't change when a component mounts or unmounts.

$3

Using `key={index}` is an antipattern. Why? Well, if you push a new element into your array your application will display the wrong data because your index/value pairing won't be updated.

Simple Example

You can use `keyIndex(arr, 1)` to convert an array like `["one", "two", "three"]` into:

`javascript
[
{
value: "one",
_id: "kRf6c2fY"
}, {
value: "two",
_id: "lYf5cGfM",
}, {
value: "three",
_id: "mZfKcGf9"
}
]
`

The first paramater in `keyIndex(arr, 1)` is the array you want to add keys (or IDs) to. The second paramter is a number to uniquely indentify your react component or use-case.

Since the generated IDs are stable and predictable, using a different number each time you use the helper function ensures the uniqueness of the generated set of IDs.

Complete Example

`javascript
import React from 'react';
import React from 'react-dom';
import keyIndex from 'react-key-index';

class App extends React.Component {
render() {
var arr = ["one", "two", "three"];
arr = keyIndex(arr, 1);

{/*

keyIndex() will convert arrays into an array of objects
with this structure:
[
{
_id: kRf6c2fY,
value: value
}, {
...
}
]

*/}

const list = arr.map((arr) =>


{arr.value}

);
return(

{list}

);
}
}

ReactDOM.render(, document.getElementById("root"));
`

Complex Example

Let's say you want to draw a table with three columns. This use-case is slightly more complicated because you need a unique ID for each column. Therefore you need a unique ID for each object property - a unique ID for each array element will not suffice.

Suppose the data you want to display is formally as follows:

`javascript
const data = [
{
product: 'sneakers',
price: 20,
quantity: 100
}, {
// more products
}
]
`

Then `keyIndex(data, 1)` will return:

`javascript
const data = [
{
{
product: 'sneakers',
_productId: 'kRf6c2fY',
price: 20,
_priceId: 'J6fmcgc7',
quantity: 100,
_quantityId: 'lYf5cGfM'
}, {
...
}
}
]
`

And you'd use these ids as follows to create your table:

`javascript
class App extends React.Component {
render() {
data = keyIndex(data, 1);
const table = data.map((data) =>

{data.product}
{data.price}
{data.quantity}

);

return(



{table}

);
}
}
`

Install

`
$ npm install --save react-key-index
`




Usage

`js
const keyIndex = require('react-key-index');

keyIndex(arr, 1);
``

License

MIT © Ben