Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Extracted the logic for rendering individual list items into a separa…
…te new widget <ListItem>.
  • Loading branch information
maratbn committed Aug 5, 2018
1 parent 9e5a0be commit f3a9c63
Showing 1 changed file with 13 additions and 3 deletions.
16 changes: 13 additions & 3 deletions webpack_in/entry.jsx
Expand Up @@ -74,6 +74,16 @@ class TextWidget extends React.Component {
}
}

class ListItem extends React.Component {
render() {
return (<li>{ this.props.caption }</li>);
}
}

ListItem.propTypes = {
caption: PropTypes.string.isRequired
};

class ListWidget extends React.Component {
constructor(props) {
super(props);
Expand Down Expand Up @@ -109,9 +119,9 @@ class ListWidget extends React.Component {
<div style={ objStyleCommon }>
<div style={ objStyleContent }>
<ul style={{ display: 'inline-block', textAlign: 'left' }}>
{ this.state.items.map((objItem, index) => (<li key={ objItem.id }>
{ objItem.caption }
</li>)) }
{ this.state.items.map((objItem, index) => (<ListItem key={ objItem.id }
caption={ objItem.caption }
/>)) }
</ul>
</div>
<div>
Expand Down

0 comments on commit f3a9c63

Please sign in to comment.