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?

Answer 1

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.