Permalink
Browse files

Added logic to detect when a <ListItem> checkbox is changed, and to u…

…pdate the <ListWidget> React 'state' accordingly for the corresponding item.
  • Loading branch information...
maratbn committed Jul 1, 2018
1 parent b76d71b commit 9ebd9ca822c758e146804d3c6211843dcc1b5382
Showing with 22 additions and 2 deletions.
  1. +22 −2 webpack_in/entry.jsx
@@ -77,13 +77,15 @@ class TextWidget extends React.Component {
class ListItem extends React.Component {
render() {
return (<li><input type='checkbox'
checked={ this.props.isChecked }/>{ this.props.caption }</li>);
checked={ this.props.isChecked }
onChange={ this.props.onChangeChecked }/>{ this.props.caption }</li>);
}
}
ListItem.propTypes = {
caption: PropTypes.string.isRequired,
isChecked: PropTypes.bool.isRequired
isChecked: PropTypes.bool.isRequired,
onChangeChecked: PropTypes.func.isRequired
};
class ListWidget extends React.Component {
@@ -103,6 +105,17 @@ class ListWidget extends React.Component {
total_added: state.total_added + 1
});
this._mutateStateToUpdateItemChecked = (state, id, isChecked) => ({
...state,
items: state.items.map(objItem => (
objItem.id === id ? {
...objItem,
is_checked: isChecked
}
: objItem
))
});
const objStateEmpty = {
items: [],
total_added: 0
@@ -126,6 +139,13 @@ class ListWidget extends React.Component {
<ListItem key={ objItem.id }
caption={ objItem.caption }
isChecked={ objItem.is_checked }
onChangeChecked={ () => {
this.setState(
this._mutateStateToUpdateItemChecked(
this.state,
objItem.id,
!objItem.is_checked));
}}
/>
)) }
</ul>

0 comments on commit 9ebd9ca

Please sign in to comment.