tylermcginnis · April 11, 2018 21:39
diff --git a/react-bootcamp-day-3-2.html b/react-bootcamp-day-3-2.html
 <!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)

        console.log('--constructor--')
      }
      componentDidMount() {
        console.log('--componentDidMount--')
      }
      componentDidUpdate() {
        console.log('--componentDidUpdate--')
      }
      componentWillUnmount() {
        console.log('--componentWillUnmount--')
      }
      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() {
        console.log('--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>
	<!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)

	console.log('--constructor--')
	}
	componentDidMount() {
	console.log('--componentDidMount--')
	}
	componentDidUpdate() {
	console.log('--componentDidUpdate--')
	}
	componentWillUnmount() {
	console.log('--componentWillUnmount--')
	}
	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() {
	console.log('--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>