Skip to content

Instantly share code, notes, and snippets.

@victorpavlenko victorpavlenko/React
Created Nov 25, 2016

Embed
What would you like to do?
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()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.