Encountered two children with the same key, `#hashtag`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

[jmsktm]

Error message: Encountered two children with the same key, #hashtag. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

Note #hashtag #hashtag in index.js.

[cristianbote]

Hey @jmsktm, thanks for opening this issue. Fantastic reproduction! Should be straight forward to fix it. Do you wanna tackle it? If not I can surely do it.

[asharonbaltazar]

I'll take it! Can I ask how the keys are passed down?

[cristianbote]

Awesome @asharonbaltazar! Thank you!

Here it is in the default hashtag renderer https://github.com/cristianbote/react-hashtag/blob/master/src/index.js#L24. I think the most straightforward way to achieve uniqueness is to keep a counter outside and compute the key based on it.

let counter = 0;

const defaultHashtagRenderer = createElement => (hashtag, onClick) =>
  createElement(
    "span",
    {
      key: hashtag + counter++,
      onClick: onClick ? e => onClick(hashtag, e) : null
    },
    hashtag
  );

[asharonbaltazar]

Love the enthusiasm! How would you go about debugging a React component? First time doing this, so I'd appreciate any help.

[jason-hwang]

Hello, all :) Any updates?