class App extends Component {
  state = {
    name: '',
    username: '',
    location: '',
    password: '',
  }

  setName = (evt) => this.setState({ name: evt.target.value });

  setUsername = (evt) => this.setState({ username: evt.target.value });

  setLocation = (evt) => this.setState({ location: evt.target.value });

  setPassword = (evt) => this.setState({ password: evt.target.value });

  render() {
    const { name, username, location, password } = this.state;
    return (
      <div className="App">
        <p>Name: {name}</p>
        <input onChange={this.setName} value={name} />
        <p>Username: {username}</p>
        <input onChange={this.setUsername} value={username} />
        <p>Location: {location}</p>
        <input onChange={this.setLocation} value={location} />
        <p>Password</p>
        <input onChange={this.setPassword} value={password} />
      </div>
    )
  }
}