SOURCE

class Circle extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        var circleStyle={
            width:150,
            height:150,
            margin: 20,
            display: 'inline-block',
            backgroundColor:this.props.bgColor,
            borderRadius:'50%'
        };
        return  <div style={circleStyle}></div>
    }
}

var renderData=[];
for (var i = 0; i < 10; i++) {
    // generate a random color
    var color= `#${Math.floor(Math.random() * 16777215).toString(16)}`;
    // generate a unique key for each instance (recommended by React) by converting the hex to integer 
    var key= Number.parseInt(color.slice(1), 16)+1;
    // push in a colored circle
    renderData.push(<Circle key={key} bgColor={color} />);
};
ReactDOM.render(
    <div>{renderData}</div>,
    document.querySelector('#container8')
);

<div id="container8">
    <!-- This element's contents will be replaced with your component. -->
</div>

.container p {
    font-size: 25px;
}
body{
  background-color: #FCFCFC;
}