Tagcloud is empty

[SecretUnicorn]

I have a list of word and I am generating divs inside the Tagcloud tag. The problem is that there are no elements in the dom listed.

const styles = {
        small: {
            fontSize: 15,
            opacity: 0.8,
        },
        medium: {
            fontSize: 18,
            opacity: 0.9,
        },
        big: {
            fontSize: 22,
            opacity: 1,
        }
    }

    const tagCloudWords = [
        { text: "Wiesbaden", size: "medium" },
        { text: "Mainz", size: "small" },
        { text: "Video", size: "big" }
    ]

<TagCloud 
            className='tag-cloud'
            style={{
              fontFamily: 'sans-serif',
              fontSize: 30,
              padding: 5,
            }}>
            {tagCloudWords.map((w,index) => {
                return (
                    <div style={styles[w.size]} key={index}>
                        {w.text}
                    </div>
                )
            })}
            
          </TagCloud>

[briantical]

I am experiencing the same issues using create-react-app.

[rcolepeterson]

Me too

[JAlexanderGuzman]

I also had the same issue, after several testing I found it's just add width and height to 100% on tag-cloud class

.tag-cloud {
	height: 100%;
	width: 100%;
}

.tag-cloud > div {
	transition: 1.4s;
}

you also must add a forceUpdate interval to add the update animation

componentDidMount() {
        setInterval(() => {
            this.forceUpdate();
        }, 3000);
    }

[atifsyedali]

Same. Couldn't get this to work regardless of forceUpdate or what I throw into it. Moved to https://www.npmjs.com/package/react-d3-cloud

[cristicares]

Same. I'm using create-react-app and works for me include the divs app-outer and app-inner with the styles respective. How the example