Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!DOCTYPE html>
<html>
<head>
<title>First React App</title>
<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 src='https://unpkg.com/babel-standalone@6/babel.min.js'></script>
</head>
<body>
<div id='app'></div>
<script type='text/babel'>
function ActiveFriends (props) {
return (
<div>
<h2>Active Friends</h2>
<ul>
{props.list.map((friend) => (
<li key={friend.name}>
<span>{friend.name}</span>
<button onClick={() => props.onRemoveFriend(friend.name)}>Remove</button>
<button onClick={() => props.onToggleFriend(friend.name)}>Deactivate</button>
</li>
))}
</ul>
</div>
)
}
function InactiveFriends (props) {
return (
<div>
<h2>Inactive Friends</h2>
<ul>
{props.list.map((friend) => (
<li key={friend.name}>
<span>{friend.name}</span>
<button onClick={() => props.onToggleFriend(friend.name)}>Activate</button>
</li>
))}
</ul>
</div>
)
}
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
friends: [
{
name: 'Jordyn',
active: true,
},
{
name: 'Mikenzi',
active: true,
},
{
name: 'Jake',
active: false
}
],
input: '',
}
this.handleRemoveFriend = this.handleRemoveFriend.bind(this)
this.updateInput = this.updateInput.bind(this)
this.handleAddFriend = this.handleAddFriend.bind(this)
this.handleToggleFriend = this.handleToggleFriend.bind(this)
}
handleAddFriend() {
this.setState((currentState) => {
return {
friends: currentState.friends.concat([{
name: this.state.input,
active: true
}]),
input: ''
}
})
}
handleRemoveFriend(name) {
this.setState((currentState) => {
return {
friends: currentState.friends.filter((friend) => friend.name !== name)
}
})
}
handleToggleFriend(name) {
this.setState((currentState) => {
const friend = currentState.friends.find((friend) => friend.name === name)
return {
friends: currentState.friends.filter((friend) => friend.name !== name)
.concat([{
name,
active: !friend.active
}])
}
})
}
updateInput(e) {
const value = e.target.value
this.setState({
input: value
})
}
render() {
return (
<div>
<input
type='text'
placeholder='new friend'
value={this.state.input}
onChange={this.updateInput}
/>
<button onClick={this.handleAddFriend}>
Submit
</button>
<div>
<button onClick={() => this.setState({
friends: []
})}>Clear All</button>
</div>
<ActiveFriends
list={this.state.friends.filter((friend) => friend.active === true)}
onRemoveFriend={this.handleRemoveFriend}
onToggleFriend={this.handleToggleFriend}
/>
<InactiveFriends
list={this.state.friends.filter((friend) => friend.active === false)}
onToggleFriend={this.handleToggleFriend}
/>
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
)
</script>
</body>
</html>
@clarkjo12

This comment has been minimized.

Copy link

commented Jan 28, 2019

you da man!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.