Permalink
Browse files

Added logic to wire-up the 'Change text...' button to prompt the user…

… for the text when clicked, and to update the <TextWidget> 'state' with the text entered, to cause it to be re-rendered by React with that new text.
  • Loading branch information...
maratbn committed Jun 30, 2018
1 parent 89ecb68 commit f25a9fb0169a3c52c92b9f1f14efba9147872f51
Showing with 14 additions and 3 deletions.
  1. +14 −3 webpack_in/entry.jsx
@@ -25,13 +25,15 @@ const objStyleContent = {
class ButtonWidget extends React.Component {
render() {
return (
<button style={{ margin: '1em'}}>{ this.props.caption }</button>
<button style={{ margin: '1em'}}
onClick={ this.props.onClick }>{ this.props.caption }</button>
);
}
}
ButtonWidget.propTypes = {
caption: PropTypes.string.isRequired
caption: PropTypes.string.isRequired,
onClick: PropTypes.func
};
class HelloWidget extends React.Component {
@@ -57,7 +59,16 @@ class TextWidget extends React.Component {
return (
<div style={ objStyleCommon }>
<div style={ objStyleContent }>{ this.state.text }</div>
<ButtonWidget caption="Change text..." />
<ButtonWidget caption="Change text..."
onClick={() => {
const strTextNew = prompt("Please enter text to display:",
this.state.text);
if (strTextNew === null) {
return;
}
this.setState({...this.state, text: strTextNew});
}}/>
</div>
);
}

0 comments on commit f25a9fb

Please sign in to comment.