Skip to content

Instantly share code, notes, and snippets.

@allenjprice
Created July 27, 2017 21:58
Show Gist options
  • Save allenjprice/d25e01208fadf4aaccecb025e47085ac to your computer and use it in GitHub Desktop.
Save allenjprice/d25e01208fadf4aaccecb025e47085ac to your computer and use it in GitHub Desktop.
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
todos: ['wake up', 'eat a breakfast', 'try to take over the world'],
value: ''
}
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({
value: event.target.value
});
}
handleClick() {
// have the value in our state (which is the value of the input) added to the todo list
this.setState({
// todos: this.state.todos.concat([this.state.value])
todos: [...this.state.todos, this.state.value]
})
}
//EXPLAIN FOR YOURSELF: What is the difference between the way the `onChange` handler is created on line 32, and the way the `onClick` handler is created on line 33?
render() {
return (
<div>
<h1>Todo-React</h1>
<input type="text" onChange={this.handleChange}></input>
<button onClick={this.handleClick.bind(this)}>add todo</button>
<hr />
<ul>
{this.state.todos.map((todo, i) => <ListItem item={todo} /> )}
</ul>
</div>
)
}
}
const ListItem = (props) => {
return (
<li>{props.item}</li>
)
}
ReactDOM.render(<App />, document.getElementById('app'));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Todo-React</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://fb.me/react-with-addons-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>
</head>
</head>
<body>
<div id="app"></div>
<script type="text/babel" src="app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment