PradoGuilherme/gist:0f29a0579885822ab1eea064910b1eef

## gistfile1.txt
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  https://docs.google.com/forms/d/e/1FAIpQLSefpDYWu6PclcswcguIJzcQqD--Dwas19hotVHM1CX68jeBbg/viewform

  <div id="root"></div>


  <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/babel.min.js"></script>
  <script type="text/babel">

    class Form extends React.Component {

        state = {
            name: '',
            email: '',
            list: []
        }

        save = () => {
            const user = {}
            user.name = this.state.name
            user.email = this.state.email

            if(this.state.index >= 0) {
                this.state.list[this.state.index] = user
                this.setState({
                    name: '',
                    email: '',
                    index: -1,
                    list: this.state.list
                })
            } else {
                this.setState({
                    name: '',
                    email: '',
                    list: this.state.list.concat([user])
                })
            }


        }

        updateName = (event) => {
            this.setState({
                name: event.target.value
            })

        }

        updateEmail = (event) => {
            this.setState({
                email: event.target.value
            })
        }

        del = (index) => {
            delete this.state.list[index]
            this.setState({
                list: this.state.list
            })
        }

        edit = (index) => {
            this.setState({
                name: this.state.list[index].name,
                email: this.state.list[index].email,
                index: index
            })
        }

        render(){
          return (
            <div>
                <input type="text" placeholder="Nome" onChange={this.updateName} value={this.state.name}/>
                <input type="text" placeholder="Email" onChange={this.updateEmail} value={this.state.email}/>
                <button onClick={this.save}>Salvar</button>
                <hr/>
                {this.state.list.map((item, index) => (
                    <p key={index}>
                        Nome: {item.name}, Email: {item.email}
                        <button onClick={() => this.del(index)}>excluir</button>
                        <button  onClick={() => this.edit(index)}>editar</button>
                    </p>
                ))}

            </div>
          )
        }
    }

    const App = () => {
         return (
            <div>
                <h1>App contatos</h1>
                <small>Controle e gerenciamento de contatos</small>,
                <Form/>
            </div>
         )
    }

    ReactDOM.render(
        <App/>,
        document.getElementById('root')
    )

    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	</head>

	<body>
	https://docs.google.com/forms/d/e/1FAIpQLSefpDYWu6PclcswcguIJzcQqD--Dwas19hotVHM1CX68jeBbg/viewform

	<div id="root"></div>


	<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/babel.min.js"></script>
	<script type="text/babel">

	class Form extends React.Component {

	state = {
	name: '',
	email: '',
	list: []
	}

	save = () => {
	const user = {}
	user.name = this.state.name
	user.email = this.state.email

	if(this.state.index >= 0) {
	this.state.list[this.state.index] = user
	this.setState({
	name: '',
	email: '',
	index: -1,
	list: this.state.list
	})
	} else {
	this.setState({
	name: '',
	email: '',
	list: this.state.list.concat([user])
	})
	}


	}

	updateName = (event) => {
	this.setState({
	name: event.target.value
	})

	}

	updateEmail = (event) => {
	this.setState({
	email: event.target.value
	})
	}

	del = (index) => {
	delete this.state.list[index]
	this.setState({
	list: this.state.list
	})
	}

	edit = (index) => {
	this.setState({
	name: this.state.list[index].name,
	email: this.state.list[index].email,
	index: index
	})
	}

	render(){
	return (
	<div>
	<input type="text" placeholder="Nome" onChange={this.updateName} value={this.state.name}/>
	<input type="text" placeholder="Email" onChange={this.updateEmail} value={this.state.email}/>
	<button onClick={this.save}>Salvar</button>
	<hr/>
	{this.state.list.map((item, index) => (
	<p key={index}>
	Nome: {item.name}, Email: {item.email}
	<button onClick={() => this.del(index)}>excluir</button>
	<button onClick={() => this.edit(index)}>editar</button>
	</p>
	))}

	</div>
	)
	}
	}

	const App = () => {
	return (
	<div>
	<h1>App contatos</h1>
	<small>Controle e gerenciamento de contatos</small>,
	<Form/>
	</div>
	)
	}

	ReactDOM.render(
	<App/>,
	document.getElementById('root')
	)

	</script>
	</body>

	</html>