ReactJS: using object ref as {key}?

Question

How can I use an object reference as {key} in ReactJS?

I've tried this:

let ruleList = _.map(this.state.rules, function(rule) {
      return <RuleList rule={rule} key={rule} />
    });

but this ends up being printed in the console:

Warning: flattenChildren(...): Encountered two children with the same key, .0:$[object Object]. Child keys must be unique; when two children share a key, only the first child will be used.

Any way to get around this without hacks such as generating IDs for each item?

I am asking about rule object. Meaning, one item in the rules array. — Dhiraj
– Dhiraj, Commented Jul 13, 2015 at 22:55

amann · Accepted Answer · 2019-09-27 14:00:41Z

11

I had a similar situation where the object has no unique id.

I ended up generating ids for the items based on object references:

let curId = 1;
const ids = new WeakMap();

function getObjectId(object) {
  if (ids.has(object)) {
    return ids.get(object);
  } else {
    const id = String(curId++);
    ids.set(object, id);
    return id;
  }
}

// Usage
<RuleList rule={rule} key={getObjectId(rule)} />

I know you mentioned that you don't want to generate ids, but I thought I'd share this since it is generic and doesn't depend on any properties in your object.

answered Sep 27, 2019 at 14:00

amann

5,9305 gold badges42 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Poyoman · Accepted Answer · 2021-03-16 08:47:32Z

4

I created a lib intended to solve this problem. It's based on the idea suggested by @amann (using a weakMap). It provides a hook, so that the weakMap is created and destroyed with the component.

Have a look to https://www.npmjs.com/package/react-key-from-object

import { useKeyGen } from 'react-key-from-object'

const DogList = () => {
  const keyGen = useKeyGen();

  return (
    <ul>
      {dogs.map((dog) => (
        <li key={keyGen.getKey(dog)}>
          {dog.name}
          -
          {dog.age}
        </li>
      ))
    </ul>
  );
}

answered Mar 16, 2021 at 8:47

Poyoman

2,0011 gold badge24 silver badges34 bronze badges

Comments

Dhiraj · Accepted Answer · 2015-07-14 00:01:56Z

2

Update

Objects cannot be used as keys. React js requires a key to be a string or a number and should be unique.

IMO there are two ways to solve this problem (open to suggestions)

Option 1

Iterate through the array and create a unique index

var rules = data.rules;
for(var i=0;i<rules.length;i++){
  data.rules[i].key = i;
}

Use this key in _.map

let ruleList = _.map(this.state.rules, function(rule) { 
  return <RuleList rule={rule} key={rule.key} />
});

Option 2

Maintain a array of indices of rule objects which are not deleted.

var N = rules.length; 
var arrayOfRules = Array.apply(null, {length: N}).map(Number.call, Number);

When you delete an item remove it using .splice.

The component should look like this

let ruleList = _.map(this.state.rules, function(rule, index) { 
  return <RuleList rule={rule} key={arrayOfRules[index]} />
});

----

Since rule object has no property which is unique and key needs to be unique, add the index parameter that comes in the map method.

let ruleList = _.map(this.state.rules, function(rule, index) { // <--- notice index parameter
  return <RuleList rule={rule} key={index} />
});

edited Jul 14, 2015 at 0:01

answered Jul 13, 2015 at 22:59

Dhiraj

33.7k10 gold badges65 silver badges78 bronze badges

5 Comments

David Xu Over a year ago

this doesn't work. when you delete an item that has something before it, the rule reference gets clobbered up with the previous item's reference.

Dhiraj Over a year ago

I am sorry, I didnt quite understand. Can you please explain more ?

David Xu Over a year ago

if you have [1, 2, 3, 4] and you remove 1, you'll end up with [1, 2, 3] instead of [2, 3, 4].

Ben Carp Over a year ago

@Dhiraj, can you provide any reference that keys must be string or number?

Dhiraj Over a year ago

@BenCarp more info here reactjs.org/docs/lists-and-keys.html#keys

Gerald H · Accepted Answer · 2023-08-11 04:25:48Z

0

Perhaps useId() which is part of React can help!

const ids = childrens.map(() => useId());

https://www.npmjs.com/package/react-key-from-object

answered Aug 11, 2023 at 4:25

Gerald H

6187 silver badges18 bronze badges

Comments

Kerem atam · Accepted Answer · 2023-08-21 20:09:32Z

0

This violates React rules but who doesn't:D

const useObjectId = (data) => {
  const idRef = useRef(0);
  return useMemo(() => idRef.current++, [data]);
};

Implementation:

const ruleId = useObjectId(rule);

return <RuleList rule={rule} key={ruleId} />

answered Aug 21, 2023 at 20:09

Kerem atam

2,8672 gold badges26 silver badges40 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:29:46Z

-4

Why do you insist on using the rule object as the key?

The easiest solution would be to use an index, returned from the underscore map function, instead. Like this:

let ruleList = _.map(this.state.rules, function(rule, index) {
  return <RuleList rule={rule} key={index} />
});

Here is a similar topic related to the map function.

edited May 23, 2017 at 12:29

CommunityBot

11 silver badge

answered Jul 13, 2015 at 23:00

marizikmund

4083 silver badges7 bronze badges

4 Comments

David Xu Over a year ago

this doesn't work. when you delete an item that has something before it, the rule reference gets clobbered up with the previous item's reference.

marizikmund Over a year ago

Are all the objects different? In that case, using stringify could help. Like this: key={JSON.stringify(rule)}

Hector Scout Over a year ago

Index as a key is an antipattern medium.com/@robinpokorny/…

Joshua Pinter Over a year ago

@marizikmund This worked wonders. Was trying to force a child Component to re-render based on a filters Hash changing. This did the trick perfectly. Cheers.

Collectives™ on Stack Overflow

ReactJS: using object ref as {key}?

6 Answers 6

Comments

Comments

Update

Option 1

Option 2

----

5 Comments

Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Update

Option 1

Option 2

----

5 Comments

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related