andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactored some names

Browse Source
This commit is contained in:
Arjun Mahishi
2018-12-31 11:10:21 +05:30
committed by GitHub
parent fa4fd78291
commit a010c93050
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
snippets/Ticker.md
View File

@ -12,15 +12,15 @@ Renders a ticker component.
class Ticker extends Component { class Ticker extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = {timer: 0} this.state = {ticker: 0}
this.interval = null this.interval = null
} }
tick = () => { tick = () => {
this.reset() this.reset()
this.interval = setInterval(() => { this.interval = setInterval(() => {
if (this.state.timer < this.props.time) { if (this.state.ticker < this.props.times) {
this.setState(({ timer }) => ({timer: timer + 1})) this.setState(({ ticker }) => ({ticker: ticker + 1}))
}else{ }else{
clearInterval(this.interval) clearInterval(this.interval)
} }
@ -28,14 +28,14 @@ class Ticker extends Component {
} }
reset = () => { reset = () => {
this.setState({timer: 0}) this.setState({ticker: 0})
clearInterval(this.interval) clearInterval(this.interval)
} }
render() { render() {
return ( return (
<div> <div>
<span style={{fontSize: 100}}>{this.state.timer}</span> <span style={{fontSize: 100}}>{this.state.ticker}</span>
<button onClick={this.tick}>Tick!</button> <button onClick={this.tick}>Tick!</button>
<button onClick={this.reset}>Reset</button> <button onClick={this.reset}>Reset</button>
</div> </div>
@ -45,5 +45,5 @@ class Ticker extends Component {
``` ```
```jsx ```jsx
ReactDOM.render(<Ticker time={5} interval={1000} />, document.getElementById('root')); ReactDOM.render(<Ticker times={5} interval={1000} />, document.getElementById('root'));
``` ```