Change the color of specific row of bootstrap table dynamically

Question

I am using bootstrap table in my react project. I have a table which gets it's data from tags like this:

<Table className='flags-table' responsive hover>
    <thead>
    <tr>
        <th></th>
        <th> Time In</th>
        <th> Time Out</th>
        <th> Type</th>
        <th> Category</th>
    </tr>
    </thead>
    <tbody>
    {
        this.props.tag_fetch_reducer.tags.map((x, i) => (
            <tr key={i} onClick={this.handleRowClick.bind(this, i)}>
                <td>
                    <div className='red-box'></div>
                </td>
                <td> {this.secondsToHms(x.time)} </td>
                <td> {this.secondsToHms(x.stopTime)} </td>
                <td> {x.tagname} </td>
                <td contentEditable="false"> {x.category}</td>
            </tr>
        ))
    }
    </tbody>
</Table>

What I want:

• I have variable named tagIndex which changes it's state after a certain interval of time. So the value of tagIndex keeps changing. This value can be from 0 and to the same value as the last index of table row. Now what I want is whenever the tagIndex attains a certain value, I want to change the color of row of that index.

For example: tagIndex is 5, then I should see the color of 5th row as yellow and all the other row as white. Then when tagIndex changes to say 8, I want the yellow color to shift to 8th row and all the other rows to be white. How can I do this?

Answer 1

I can't tell exactly what table you are using (your markup looks a bit different than react-bootstrap-table)

But assuming you are using just normal bootstrap with a table. You could do something like this. I created a timer where I change the row that is selected in state every second. I then add a class (you could use an inline style depending on how your project is structured) which sets the background to red to the row that is the selected row.

https://jsfiddle.net/nacj5pt4/

var Hello = React.createClass({
  getInitialState: function() {
    return {
      selectedIndex: 0
    };
  },
  componentDidMount() {
    setInterval(() => this.setState({
      selectedIndex: (this.state.selectedIndex + 1) % this.props.data.length
    }), 1000)
  },
  render: function() {
    return (
      <table className='flags-table'>
        <thead>
        <tr>
            <th>Tagname</th>
            <th>Value</th>
        </tr>
        </thead>
        <tbody>
        {
            this.props.data.map((row, i) => (
                <tr className={this.state.selectedIndex === i ? 'selected' : ''} key={i}>
                    <td>
                      {row.tagName}
                    </td>
                    <td>
                      {row.value}
                    </td>
                </tr>
            ))
        }
        </tbody>
    </table>
   );
  }
});

const data = [
  {tagName: "category 1", value: 100},
  {tagName: "category 2", value: 100},
  {tagName: "category 3", value: 100},
  {tagName: "category 4", value: 100}
]


ReactDOM.render(
  <Hello data={data} />,
  document.getElementById('container')
);

.selected {
  background: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container" />