List Jumping Example

HTML

<div id="app"></div>

CSS

li {
  padding: 30px 5px;
  text-align: center;
  border-bottom: 1px solid #000;
}

li.item_10 {
  background-color: #ff0;
}

.done {
  border: 4px solid #f00;
}

.not_done {
  border: 4px solid #00f;
}

React

class List extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
    	done: false,
    	items: [
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        10,
        11,
        12,
        13,
        14,
        15,
        16,
        17,
        18,
        19,
        20,
      ]
    }
  }
  
  componentDidMount() {
  	window.setTimeout(this._update, 5000)
  }
  
  render() {
    return (
      <ul className={ this.state.done ? 'done' : 'not_done' }>
        { this.state.items.map((x) => (
        	<li 
            key={ `item_${ x }` } 
            className={ `item_${ x }` }
          >
            { x }
          </li>
        )) }
      </ul>
    )
  }
  
  _update = () => {
    console.log('_UPDARE')
  	this.setState({
      done: true,
    	items: [
        10,
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        11,
        12,
        13,
        14,
        15,
        16,
        17,
        18,
        19,
        20,
      ]
    })
  }
}

ReactDOM.render(<List />, document.querySelector("#app"))