Form handling by class component

import React, {Component, router} from "react";

class Create extends Component {
    constructor(props){
       super();
       this.state = {
          name: '',
          displayname: '',
          description: '',
       }
    }

    handleChange(e){
       const key = e.target.id;
       const value = e.target.value;
       this.setState(values => ({
          ...values, [key]: value
       }));
    }

    handleSubmit(e){
      e.preventDefault()
      router.post("form-submit", this.values);
    }

    render() {
      const {name, displayname, description} = this.state;

      return (
        <div>

    <center>      
    <form onSubmit={(e) => this.handleSubmit(e)} style={{width:'500px'}}><br/><br/>
      <label htmlFor="first_name">Fullname:</label>
      <input className="form-control" id="name" value={name} onChange={(e) => this.handleChange(e)} /><br/>
      <br/>
      <label htmlFor="last_name">Display Name:</label>
      <input className="form-control" id="displayname" value={displayname} onChange={(e) => this.handleChange(e)} /><br/>
      <label htmlFor="email">Description:</label>
      <input className="form-control" id="description" value={description} onChange={(e) => this.handleChange(e)} /><br/>

      <buttontype="submit"className="btn btn-primary"

     >Submit</button>

    </form>
    </center>

        </div>

    )

}

}

export default Create;