Created
October 23, 2018 18:13
-
-
Save zevaverbach/fb29af2e2f22a5fc569708967f96cbfd to your computer and use it in GitHub Desktop.
Basic React app with the beginnings of undo functionality
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <head> | |
| <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> | |
| <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> | |
| <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| <script type='text/babel'> | |
| class NumberList extends React.Component { | |
| state = { | |
| numbers: this.props.numbers, | |
| undoQueue: [this.props.numbers], | |
| } | |
| addRandomNum = () => { | |
| this.setState({ | |
| undoQueue: this.state.undoQueue.concat([this.state.numbers]), | |
| numbers: this.state.numbers.concat(Math.floor(Math.random() * 10)), | |
| }) | |
| console.log(this.state.undoQueue) | |
| } | |
| //undo = () => | |
| render() { | |
| return ( | |
| <div> | |
| <ul> | |
| {this.state.numbers.map((number, index) => <li key={index}>{number}</li>)} | |
| </ul> | |
| <button onClick={this.addRandomNum}>Add A Random Number</button> | |
| <button onClick={this.undo}>Undo</button> | |
| </div> | |
| ) | |
| } | |
| } | |
| ReactDOM.render(<NumberList numbers={[1,2,3,4,5]} letters={['a', 'b', 'c']}/>, document.getElementById('root')) | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment