title: React - get random color in component
body: <p>I have a component in my React project where I'm trying to pass a random color via props however it's not working (the random numbers work just fine though).  I'm unsure what I'm doing incorrectly here and my GoogleFu + StackO searches have not rendered an answer.  Anyone know what I'm doing incorrectly?</p>
  
  <p>My code is:</p>
  
  <pre><code>    getRandomColor(){
      let colorValues = ["red", "blue", "green", "yellow"];
      return colorValues[Math.floor(Math.random() * colorValues.length)];
    }
  
    generatePulse(i) {
      const props = {
        key: i,
        top: this.getRandomNumber(-385, 556),
        left: this.getRandomNumber(-1000, 2500),
        scale: `scale(${this.getRandomNumber(1, 20)})`,
        fade: `fade ${this.getRandomNumber(1, 60)}s`,
        scaling: `scaling ${this.getRandomNumber(1, 25)}s`,
        background: `background ${this.getRandomColor}`,
      }
      return (&lt;Stars {...props} /&gt;)
    }
  </code></pre>
  
  <p>And it should affect the background here (I'm aware I have 2 animations running, that's another problem I need to solve)</p>
  
  <pre><code>    class Stars extends React.Component {
    render() {
      return (
        &lt;Starholder&gt;
          &lt;Star style={{
            left: this.props.left + 'px',
            top: this.props.top + 'px',
            transform: this.props.scale,
            background: this.props.background,
            animation: this.props.fade + ' normal forwards ease-in-out',
            animation: this.props.scaling + ' infinite alternate',}}&gt;&lt;/Star&gt;
        &lt;/Starholder&gt;
      );
    }
  }
  </code></pre>