How to add components to list dynamically in React with no redundant render?

Here is an online sample.

var FruitList = React.createClass({
      render : function() {
        return (
          <div className="container">
            <ul className="list-group text-center">
              {
                Object.keys(this.props.fruits).map(function(key) {
                  count = count + 1;
                  return <li className="list-group-item list-group-item-info">{this.props.fruits[key]+count}</li>
                }.bind(this))
              }
            </ul>
           </div>
         );
       }
     });

I want to add "Cherry" to list.

As is, it redraws all items redundantly. I hope that orange1 and apple2 need to keep their state with no redraw redundantly.

What the design for dynamic list components is better?