title: reactjs - creating random shapes, colors and range of sizes of material ui icons for a drag and drop
body: <p>I am building a drag and drop application -- and I want to do something interesting with the idol state near the cloud icon.</p>
  <p>I want to define a set of material icons I can render, and an array of colors they can be and sizes. On componentDidMount -- create a random number of items - which could be random shapes, sizes and colors.</p>
  <p>I am unsure how to loop through these and apply the random states and properties</p>
  <p>latest codebase</p>
  <ul>
  <li><a href="https://codesandbox.io/s/withered-feather-rrl76" rel="nofollow noreferrer">https://codesandbox.io/s/withered-feather-rrl76</a></li>
  </ul>
  <p><a href="https://i.stack.imgur.com/KjunK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KjunK.png" alt="enter image description here" /></a></p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  //import Grid from '@material-ui/core/Grid';
  
  import CloudQueueIcon from &quot;@material-ui/icons/CloudQueue&quot;;
  
  import AddIcon from &quot;@material-ui/icons/Add&quot;;
  import RadioButtonUncheckedOutlinedIcon from &quot;@material-ui/icons/RadioButtonUncheckedOutlined&quot;;
  import FiberManualRecordIcon from &quot;@material-ui/icons/FiberManualRecord&quot;;
  
  import &quot;./MagicCloud.scss&quot;;
  
  class MagicCloud extends Component {
    constructor(props, context) {
      super(props, context);
  
      this.state = {
        icons: [
          &lt;AddIcon /&gt;,
          &lt;RadioButtonUncheckedOutlinedIcon /&gt;,
          &lt;FiberManualRecordIcon /&gt;
        ],
        colors: [&quot;red&quot;, &quot;blue&quot;, &quot;pink&quot;]
      };
    }
    componentDidMount() {
      this.getShapes();
    }
  
    getRandomArrayEl(array) {
      return array[Math.floor(Math.random() * array.length)];
    }
  
    shapeMaker() {
      const randomShape = this.getRandomArrayEl(this.state.icons);
      console.log(&quot;randomShape&quot;, randomShape);
      return randomShape;
    }
  
    getShapes() {
      let randomSize = 10;
  
      let items = [];
      let that = this;
  
      for (let i = 0; i &lt; randomSize; i++) {
        //items.push(this.shapeMaker(&quot;x&quot;, &quot;x&quot;, &quot;x&quot;))
  
        items.push(&lt;AddIcon /&gt;);
        //items.push(this.shapeMaker());
      }
  
      //console.log(&quot;items&quot;, items);
  
      this.setState({ items: items });
  
      //return {items[0]}
    }
  
    render() {
      return (
        &lt;div className=&quot;magic-cloud&quot;&gt;
          &lt;div className=&quot;lucky-cloud-container&quot;&gt;
            &lt;CloudQueueIcon className=&quot;cloud&quot; /&gt;
            &lt;div&gt;Drag and drop to upload&lt;/div&gt;
            &lt;div class=&quot;lucky-charms&quot;&gt;
              {this.state.items &amp;&amp;
                this.state.items.map(function (item) {
                  {
                    item;
                  }
                })}
            &lt;/div&gt;
          &lt;/div&gt;
  
          {/*
          &lt;AddIcon className=&quot;small gold bubble x1&quot; /&gt;
          &lt;RadioButtonUncheckedOutlinedIcon className=&quot;small pink bubble x2&quot; /&gt;
          &lt;FiberManualRecordIcon className=&quot;small purple bubble x3&quot; /&gt;
  
          &lt;AddIcon className=&quot;small purple bubble x1&quot; /&gt;
          &lt;RadioButtonUncheckedOutlinedIcon className=&quot;small lavendar bubble x2&quot; /&gt;
          &lt;FiberManualRecordIcon className=&quot;small gold bubble x3&quot; /&gt;
          */}
        &lt;/div&gt;
      );
    }
  }
  
  export default MagicCloud;
  </code></pre>