Import tags from another component?

[bravo-kernel]

Awesome job mr. @IjzerenHein ❤️

Would it be possible to place my tags in a different component (like e.g. TagCloudTags as used in the example below)?

Thus far the tags do appear on-screen but as a flat-list. Trying to integrate it into Gatsby.

Sample code

TagCloud component

import React from "react"
import TagCloud from "react-tag-cloud"
import randomColor from "randomcolor"
import TagCloudTags from "./TagCloudTags"
import "./TagCloud.css"

class TagCloudContainer extends React.Component {
  componentDidMount() {
    setInterval(() => {
      this.forceUpdate()
    }, 3000)
  }
  render() {
    return (
      <div className="app-outer">
        <div className="app-inner">
          <TagCloud
            className="tag-cloud"
            style={{
              fontFamily: "sans-serif",
              //fontSize: () => Math.round(Math.random() * 50) + 16,
              fontSize: 30,
              color: () =>
                randomColor({
                  hue: "blue",
                }),
              padding: 5,
            }}
          >
            <TagCloudTags />
          </TagCloud>
        </div>
      </div>
    )
  }
}

export default TagCloudContainer

TagCloudTags component

import React from "react"

export default props => {
  return (
    <React.Fragment>
      <div>Very</div>
      <div>Nice</div>
      <div>Tag</div>
      <div>Cloud</div>
    </React.Fragment>
  )
}

[bravo-kernel]

Oh, looks like I missed this console error which probably causes the list not getting rendered. Most likely something silly on my behalf as I'm just getting started with React.

Each child in a list should have a unique "key" prop. Check the render method of Component. It was passed a child from TagCloudContainer.