Simple background-color change in React-Redux
<p>I essentially finished with one of FCC's project (<a href="https://www.freecodecamp.com/challenges/build-a-camper-leaderboard" rel="nofollow">https://www.freecodecamp.com/challenges/build-a-camper-leaderboard</a>)</p>

<p>The only customization is that I'd like is for the user to see what the table is ordered from (either recent or alltime best scores).</p>

<p>Currently I have it with jQuery telling to change the header table css-attribute directly when the user clicks either the recent or alltime column, but I do not feel this is the right way.</p>

<p>Here's my container code which holds essentially the table itself</p>

<pre><code>import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux'
import { recentData } from '../actions/index'
import { allTimeData } from '../actions/index'

export default class TableBoard extends Component {
  constructor(props){
    super(props);
  }
  componentDidMount() {
    //Is there better way to initialize the background-color???
    $("#col-recent").css("background-color", "lightblue");
    this.props.recentData() //fetch data most recent top
  }
  renderData(userData,index){
    const FCC_URL = 'https://www.freecodecamp.com/'
    const img = userData.img
    const name = userData.username;
    const recent = userData.recent;
    const allTime = userData.alltime;
    return(
      &lt;tr key={name}&gt;
        &lt;td className="rank"&gt;{index + 1}&lt;/td&gt;
        &lt;td&gt;
          &lt;img className="img-responsive"
          src={img}
          alt='FCC profile'
          /&gt; &lt;a href={FCC_URL + name}&gt;{name}&lt;/a&gt;
        &lt;/td&gt;
        &lt;td className="recent"&gt;{recent}&lt;/td&gt;
        &lt;td className="all-time"&gt;{allTime}&lt;/td&gt;
      &lt;/tr&gt;
    )
  }
  getRecentData(){
    $("#col-recent").css("background-color", "lightblue");
    $("#col-alltime").css("background-color", "#e2e2e2");
    this.props.recentData()
  }
  getAllTimeData(){
    $("#col-alltime").css("background-color", "lightblue");
    $("#col-recent").css("background-color", "#e2e2e2");
    this.props.allTimeData();
  }
  render(){
    return(
      &lt;table className="table table-hover table-striped table-bordered"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th className="rank"&gt;#&lt;/th&gt;
            &lt;th className="username"&gt;Camper Name&lt;/th&gt;
            &lt;th id='col-recent'className="recent clickable"
              onClick={this.getRecentData.bind(this)}
              &gt;Points in 30 days
            &lt;/th&gt;
            &lt;th id='col-alltime' className="all-time clickable"
              onClick={this.getAllTimeData.bind(this)}
              &gt;All-time Posts
            &lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          {this.props.FCCData.map(this.renderData)}
        &lt;/tbody&gt;
      &lt;/table&gt;
    )
  }
}
function mapStateToProps(state){
  return {
    FCCData: state.collectData
  }
}
function mapDispatchToProps(dispatch){
  return bindActionCreators({ recentData, allTimeData }, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(TableBoard);
</code></pre>

<p>I am still new to React-Redux so the paradigm of state is still new to me. </p>