Permalink
Browse files

Moved the logic for <TextWidget> into a new separate file 'webpack_in…

…/text_widget.jsx'.
  • Loading branch information...
maratbn committed Jul 27, 2018
1 parent 0919b00 commit 1f86f44636ed8dbdb86ad0ab7519e8dddf5cba23
Showing with 41 additions and 28 deletions.
  1. +1 −28 webpack_in/entry.jsx
  2. +40 −0 webpack_in/text_widget.jsx
@@ -13,36 +13,9 @@ import ReactDOM from 'react-dom';
import ButtonWidget from './button_widget.jsx';
import HelloWidget from './hello_widget.jsx';
import Styles from './styles.es';
import TextWidget from './text_widget.jsx';
class TextWidget extends React.Component {
constructor(props) {
super(props);
this.state = {
text: "Some text here...."
};
}
render() {
return (
<div style={ Styles.common }>
<div style={ Styles.content }>{ this.state.text }</div>
<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>
);
}
}
class ListItem extends React.Component {
render() {
return (<li><input type='checkbox'
@@ -0,0 +1,40 @@
// This file 'text_widget.jsx' is part of an example for building a multi-widget React front-end
// app step by step as outlined in the tutorial blog at
// http://maratbn.com/blogs/2018/07/02/react-multi-widget/
import React from 'react';
import ButtonWidget from './button_widget.jsx';
import Styles from './styles.es';
class TextWidget extends React.Component {
constructor(props) {
super(props);
this.state = {
text: "Some text here...."
};
}
render() {
return (
<div style={ Styles.common }>
<div style={ Styles.content }>{ this.state.text }</div>
<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>
);
}
}
export default TextWidget;

0 comments on commit 1f86f44

Please sign in to comment.