title: How to generate React table with different colored rows?
body: <p>I’m trying to create a React table in which each row is either gray or white. I am doing this by passing rows the props ‘gray’ or ‘white’ upon their creation, but in my MyRow class I’m not sure how to take this prop and convert it to a style. </p>
  
  <p>Relevant code in MyTable.js: </p>
  
  <pre><code>    this.props.items.forEach(function(item) {
          if (i % 2 === 0) {
              rows.push(&lt;MyRow item={item} key={item.name} color={'gray'} /&gt;);
          } else {
              rows.push(&lt;MyRow item={item} key={item.name} color={'white'} /&gt;);
          }
          i++;
      }.bind(this));
  </code></pre>
  
  <p>MyRow.js render function:</p>
  
  <pre><code>render() {
      const color = this.props.color;
  
      const rowColor = {styles.color}; //?? I’m not sure how to do this—how to get color to take on either gray or white?
  
      return (
          &lt;tr className={styles.rowColor}&gt;
              &lt;td className={styles.td}&gt;{this.props.item.name}&lt;/td&gt;
              &lt;td className={styles.editButton}&gt; &lt;Button
                      onClick={this.handleEditButtonClicked}
                  /&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      );
  }
  </code></pre>
  
  <p>MyRow.css:</p>
  
  <pre><code>.td {
      font-weight: 500;
      padding: 0 20px;
  }
  
  .gray {
      background-color: #d3d3d3;
  }
  
  .white {
      background-color: #fff;
  }
  </code></pre>