Warnings. when using tag-cloud

[ustcsy]

Warning: Encountered two children with the same key, [object Object]. 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. in div in Unknown (created by Measure) in Measure (created by TagCloud) in TagCloud (at WordTags.js:36)

[IjzerenHein]

Hi. I think you have configured it wrongly. Please share your JSX code here, so I can have a closer look.

[MateuszKuba]

I got the same error using following code:

` <TagCloud className="tag-cloud" style={{ padding: 5, width: "100%", height: "100%", }}

{CLIENTS.map((item, index) => { return ( <div style={{ height: 25, width: "auto" }} key={index}> <img style={{ width: "100%", height: "100%" }} src={item} />

[Slaimuda]

Hello, I got a similar issue. I use the following codes:

<TagCloud 
    className='tag-cloud'
    style={{
      fontFamily: 'sans-serif',
      width: '100%',
      height: '100%',
      color: () => randomColor({
        hue: 'blue'
      }),
      padding: 0,
}}>
    <div><span className="anchor-span-button" onClick={() => this.analyze('item1')}>Item 1</span></div>
    <div><span className="anchor-span-button" onClick={() => this.analyze('item2')}>Item 2</span></div>
    <div><span className="anchor-span-button" onClick={() => this.analyze('item3')}>Item 3</span></div>
    <div><span className="anchor-span-button" onClick={() => this.analyze('item4')}>Item 4</span></div>
    <div><span className="anchor-span-button" onClick={() => this.analyze('item5')}>Item 5</span></div>
    <div><span className="anchor-span-button" onClick={() => this.analyze('item6')}>Item 6</span></div>
    <div><span className="anchor-span-button" onClick={() => this.analyze('item7')}>Item 7</span></div>
    <div><span className="anchor-span-button" onClick={() => this.analyze('item8')}>Item 8</span></div>
  </TagCloud>

This is the following warning from my browser:

index.js:1437 Warning: Encountered two children with the same key, `[object Object]`. 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.
    in div
    in Unknown (created by Measure)
    in Measure (created by TagCloud)
    in TagCloud (at Main.jsx:129)

[IjzerenHein]

Hi. Could you try setting a text prop on the div, like this?

<div text="item1"><span className="anchor-span-button" onClick={() => this.analyze('item1')}>Item 1</span></div>

[MateuszKuba]

Hey,

Solution worked for me

[ustcsy]

Solution works!