How to color specific cells in Table - reactjs

Question

I have a HTML Table in my ReactJS app and I want to color specific cells or rows there. I have my array in state and want to check differences between neighbor rows and then show this differencies by coloring them on red.
class MainTable extends Component {
constructor(props) {
super(props);
this.state = {
results: []
};
}
render() {
const sorted = _.sortBy(this.state.results, ['ORIGIN', 'DATASTAMP']);
return (
<div>
<div>
<Table hover striped bordered responsive size="sm">
<thead>
<tr>
<th>VERSION</th>
<th>DATE</th>
<th>ORIGIN</th>
</tr>
</thead>
<tbody>
{sorted.map(result =>
<tr>
<td>{result.VERSION}</td>
<td>{result.DATASTAMP}</td>
<td>{result.ORIGIN}</td>
</tr>
)}
</tbody>
</Table>
</div>
</div>
);
}
}
I have no idea how to do something like that. Maybe some idea? Sorry for noobie question, I'm new with ReactJS.

Answer 1

To mark some rows you can:
{sorted.map((result, index) =>
<tr className={`item-${index}`}>
<td>{result.VERSION}</td>
<td>{result.DATASTAMP}</td>
<td>{result.ORIGIN}</td>
</tr>
)}
Basically you first need some criteria on which to mark your element, than you can apply a class or style to it. Helpful is classnames so you could do something like that:
{sorted.map((result, index) =>
<tr className={classnames({
even: index % 2 == 0,
odd: !(index % 2 == 0)
})}>
That would add either even or odd to the classes of the <row>, depending on the index in the list.
I guess there are only two things to remember are:
element styles need to objects like: { backgroundColor: #000 } and
css classes need to be added as »className« property

Answer 2

You can use something like
<tr style={{'background-color': result.color}}>...</tr>
or
<tr style={{'background-color': shouldHighlight[key] ? 'red' : 'white'}}>...</tr>
Obviously in second case you need to findout before function, which table rows should be highlighted and store it in the array.
Also, you need to write your map function in format (result, key) => ... or you need to know id of the result.

Answer 3

You can add a flag in each element of your array to indicate if you need to set the background color of your cell or not.
And then use it like this in your render method :
render() {
const sorted = _.sortBy(this.state.results, ['ORIGIN', 'DATASTAMP']);
return (
<div>
<div>
<Table hover striped bordered responsive size="sm">
<thead>
<tr>
<th>VERSION</th>
<th>DATE</th>
<th>ORIGIN</th>
</tr>
</thead>
<tbody>
{sorted.map(result =>
<tr className={(result.colorFlag ? 'colored-background' : '')}>
<td>{result.VERSION}</td>
<td>{result.DATASTAMP}</td>
<td>{result.ORIGIN}</td>
</tr>
)}
</tbody>
</Table>
</div>
</div>
);
And of course, don't forget to create the CSS class
.colored-background {
background-color: #BADA55;
}