const data = [
	{ id: 2, name: 'элемент', count: 0},
	{ id: 1, name: 'элемент', count: 0},
	{ id: 0, name: 'элемент', count: 0}
]

const appendItem = () => {
  data.unshift({
    id: data.length,
    name: 'элемент',
    count: 0
  })
  render()
}

class Counter extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
          count: props.count
        }
    }
  
    handleClick = () => {
      this.setState({
        count: this.state.count += 1
      })
      this.forceUpdate()
    };

    render() {
        return <span>
          {this.state.count}
            <button onClick={this.handleClick}>+</button>
    </span>
    }
}

const ListItem =
    ({ item }) =>
        <li>{item.id} - {item.name} - <Counter count={item.count} /></li>

const renderListItem =
	(item, idx) => 
    <ListItem key={idx} item={item}/>

const List =
	({ data }) =>
  	<ul>
      {data.map(renderListItem)}
    </ul>

const ListContainer = 
	() =>
  	<div>
    	<List data={data}/>
      <button onClick={appendItem}>добавить элемент</button>
    </div>

  const render = 
    () =>
      ReactDOM.render(<ListContainer />, document.getElementById('container'))

  render()