How to generate React table with different colored rows?
<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>