import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }

  handleSubmit(event) {
    event.preventDefault();
    console.log(this.state);
  }

  render() {
    const formData = {
      first: "Bob",
      last: "Smith",
      email: "bob.smith@gmail.com",
      password: "water987"
    };

    const myArr = Object.keys(formData);

    return (
      <div className="App">
        <h1>{formData.first}</h1>
        <form action="" onSubmit={this.handleSubmit}>
          {myArr.map(element => (
            <div>
              <label>{element}</label>
              <input
                name={element}
                value={this.state.value}
                onChange={this.handleChange}
              />
            </div>
          ))}
          <input type="submit" />
        </form>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);