The conditional style response is not executed properly

Question

Ok, so I have a very interesting problem when conditionally rendering a style with className, it works for one table, but not for another.

I am using reaction version 15.6.2

I match the data and return the first row of the table or the second based on if this is a purchase or not.

if (isBuy) {
      return (
        <tr key={i} className={( newOrder ? 'updatedOrderTr' : '' )} onClick={() => this.props.populateOrderForm(amount, price, isBuy)}>
          <td>{order[1].user_depth}</td>
          <td>{numberWithDelimiter((price * amount).toFixed(prec))}</td>
          <td>{amount}</td>
          <td>{price.toFixed(prec)}</td>
        </tr>
      );
    } else {
      return (
        <tr key={i} className={( newOrder ? 'updatedOrderTr' : '' )} onClick={() => this.props.populateOrderForm(amount, price, isBuy)}>
          <td>{price.toFixed(prec)}</td>
          <td>{amount}</td>
          <td>{numberWithDelimiter((price * amount).toFixed(prec))}</td>
          <td>{order[1].user_depth}</td>
        </tr>
      );
    }

I present two instances of this component that passes an array of arrays structured this way

[ [1, {volume: 1, price: 3}], [2, {volume: 4, price: 2}] ]

The only difference is that one table is a table of sell orders, and the other is a table of purchase orders, in which the table cells are changed.

Purchase order lines are excellent, and the style displays correctly when it is assumed (when newOrder is true).

. .

https://giphy.com/gifs/3o7aCPUNIy9oA46Y8g/fullscreen

, , . , td ...

.

, .

, . .

const newOrder = JSON.stringify(this.props.data[i]) !== JSON.stringify(this.state.previousTable[i]);

!

Answer 1

, nextProps currentProps, , , re render.

, ( ) , , , . ( ).

, , , .

componentWillReceiveProps(props) {
  if (this.props.data !== props.data) {
    this.setState({previousTable: this.props.data});
  }
}