controlled_component.js

class ControlledComponent extends React.Component {
  constructor( props) { 
    super(props) 
    this.state = { 
      name: 'Firstname Lastname', 
      email: '[email protected]',
      password: ''
    } 
    
    this.handleChange = this.handleChange.bind(this) 
    this.handleSubmit = this.handleSubmit.bind(this) 
  }
  
  handleChange({ target }) { 
    this.setState({ 
      [target.name]: target.value 
    }) 
  }
  
  handleSubmit(event) { 
    event.preventDefault()
    
    const { name, email, password } = this.state;
    this.props.createAccount(
      name: name,
      email: email,
      password: password
    )
  }

  render() { 
    return (
      <form onSubmit ={this.handleSubmit}> 
        <input type="text" name="name" value={this.state.name} onChange={this.handleChange} /> 
        <input type="text" name="email" value={this.state.email} onChange={this.handleChange} />
        <input type="password" name="password" value={this.state.password} onChange={this.handleChange} />
        <button>Submit</button>
      </form>
    )
  }
}