jmmarco · April 12, 2018 00:03
diff --git a/index.html b/index.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>
  <style>
    body {
      font-family: sans-serif;
    }
  </style>
 </head>
 <body>
  <div id='app'></div>

  <script type='text/babel'>

    function Friend (props) {
      const { friend, remove, deactivate, activate } = props
      return (
        <li>
          {friend.active ? (
            <span>
              {friend.name}
              <button onClick={() => remove(friend.name)}>Remove</button>  
              <button onClick={() => deactivate(friend.name)}>Deactivate</button>
            </span>
          ) : (
            <span>
              {friend.name}
              <button onClick={() => activate(friend.name)}>Activate</button>
            </span>
          )}
        </li>
      )
    }

    class App extends React.Component {
      constructor(props) {
        super(props)
        this.state = {
          friends: [
            { name: 'Juan', active: true },
            { name: 'Tyler', active: true },
            { name: 'Michael', active: false },
            { name: 'Charles', active: true }
          ],
          input: ''
        }
        
        // Bind here, it's more performant
        this.handleRemoveFriend = this.handleRemoveFriend.bind(this)
        this.handleAddFriend = this.handleAddFriend.bind(this)
        this.updateInput = this.updateInput.bind(this)
        this.clearAllFriends = this.clearAllFriends.bind(this)
        this.deactivateFriend = this.deactivateFriend.bind(this)
        this.activateFriend = this.activateFriend.bind(this)
      }

      handleAddFriend () {
        this.setState((currentState) => {
          return {
            friends: currentState.friends.concat({name: currentState.input, active: true }),
            input: ''
          }
        })
      }

      handleRemoveFriend (name) {
        // Remove the friend
        this.setState((currentState) => {
          
          // This object will be returned and merged..
          return {
            friends: currentState.friends.filter((friend) => friend.name !== name)
          }
        })
      }

      deactivateFriend (name) {
        let friendToDeactivate = {
          name: name,
          active: false
        }

        let updatedFriends = this.state.friends.map((friend) => {
          if (friend.name === name) {
            return friendToDeactivate
          }
          return friend
        })

        this.setState({
          friends: updatedFriends
        })
      }

      activateFriend (name) {
        let friendToActivate = {
          name: name,
          active: true
        }

        let updatedFriends = this.state.friends.map((friend) => {
          if (friend.name === name) {
            return friendToActivate
          }
          return friend
        })

        this.setState({
          friends: updatedFriends
        })


      }

      clearAllFriends() {
        this.setState({
          friends: [],
        })
      }

      updateInput (e) {
        const value = e.target.value
        this.setState({
          input: value
        })
      }
      
      render () {
        const { friends } = this.state
 
        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.clearAllFriends}>
                Clear All
              </button>
            </div>

            <h2>Active Friends</h2>
            <ul>
              {friends.map(friend => friend.active && <Friend key={friend.name} friend={friend} remove={this.handleRemoveFriend} deactivate={this.deactivateFriend} />)}
            </ul>
            <h2>Inactive</h2>
            <ul>
              {friends.map(friend => friend.active == false && <Friend key={friend.name} friend={friend} activate={this.activateFriend} />)}
            </ul>
 
          </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>
	<style>
	body {
	font-family: sans-serif;
	}
	</style>
	</head>
	<body>
	<div id='app'></div>

	<script type='text/babel'>

	function Friend (props) {
	const { friend, remove, deactivate, activate } = props
	return (
	<li>
	{friend.active ? (
	<span>
	{friend.name}
	<button onClick={() => remove(friend.name)}>Remove</button>
	<button onClick={() => deactivate(friend.name)}>Deactivate</button>
	</span>
	) : (
	<span>
	{friend.name}
	<button onClick={() => activate(friend.name)}>Activate</button>
	</span>
	)}
	</li>
	)
	}

	class App extends React.Component {
	constructor(props) {
	super(props)
	this.state = {
	friends: [
	{ name: 'Juan', active: true },
	{ name: 'Tyler', active: true },
	{ name: 'Michael', active: false },
	{ name: 'Charles', active: true }
	],
	input: ''
	}

	// Bind here, it's more performant
	this.handleRemoveFriend = this.handleRemoveFriend.bind(this)
	this.handleAddFriend = this.handleAddFriend.bind(this)
	this.updateInput = this.updateInput.bind(this)
	this.clearAllFriends = this.clearAllFriends.bind(this)
	this.deactivateFriend = this.deactivateFriend.bind(this)
	this.activateFriend = this.activateFriend.bind(this)
	}

	handleAddFriend () {
	this.setState((currentState) => {
	return {
	friends: currentState.friends.concat({name: currentState.input, active: true }),
	input: ''
	}
	})
	}

	handleRemoveFriend (name) {
	// Remove the friend
	this.setState((currentState) => {

	// This object will be returned and merged..
	return {
	friends: currentState.friends.filter((friend) => friend.name !== name)
	}
	})
	}

	deactivateFriend (name) {
	let friendToDeactivate = {
	name: name,
	active: false
	}

	let updatedFriends = this.state.friends.map((friend) => {
	if (friend.name === name) {
	return friendToDeactivate
	}
	return friend
	})

	this.setState({
	friends: updatedFriends
	})
	}

	activateFriend (name) {
	let friendToActivate = {
	name: name,
	active: true
	}

	let updatedFriends = this.state.friends.map((friend) => {
	if (friend.name === name) {
	return friendToActivate
	}
	return friend
	})

	this.setState({
	friends: updatedFriends
	})


	}

	clearAllFriends() {
	this.setState({
	friends: [],
	})
	}

	updateInput (e) {
	const value = e.target.value
	this.setState({
	input: value
	})
	}

	render () {
	const { friends } = this.state

	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.clearAllFriends}>
	Clear All
	</button>
	</div>

	<h2>Active Friends</h2>
	<ul>
	{friends.map(friend => friend.active && <Friend key={friend.name} friend={friend} remove={this.handleRemoveFriend} deactivate={this.deactivateFriend} />)}
	</ul>
	<h2>Inactive</h2>
	<ul>
	{friends.map(friend => friend.active == false && <Friend key={friend.name} friend={friend} activate={this.activateFriend} />)}
	</ul>

	</div>
	)
	}
	}

	ReactDOM.render(
	<App />,
	document.getElementById('app')
	)
	</script>
	</body>
	</html>