React Submit Form Not Sending POST Request

Question

I am trying to create a frontend for a Spring Boot application and I chose React but I do not have much experience with React or JavaScript. So I have a form that I am trying to use to send a post request but when I press the submit button, nothing seems to happen. I assume its my onSubmit handler that's the problem but I don't know what is wrong with it. When I send the POST request manually it works fine so I don't think it's the REST API thats causing an issue.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import { Link } from 'react-router-dom';

class Create extends Component {

  constructor() {
    super();
    this.state = {
      name: '',
      email: '',
      title: '',
      description: ''
    };
  }
  onChange = (e) => {
    const state = this.state
    state[e.target.name] = e.target.value;
    this.setState(state);
  }

  onSubmit = (e) => {
    e.preventDefault();

    const { name, email, title, description } = this.state;

   axios.post('/create', { name, email, title, description })
      .then((result) => {
        this.props.history.push("/")
      });


  }

  render() {
    const { name, email, title, description } = this.state;
    return (
      <div class="container">
       <div class="panel panel-default">
         <div class="panel-heading">
            <h3 class="panel-title">
              Send Message
            </h3>
          </div>
          <div class="panel-body">
            <h4><Link to="/"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> Message List</Link></h4>
            <form onSubmit={this.onSubmit}>
             <div class="form-group">
               <label for="name">Name:</label>
               <input type="text" class="form-control" name="name" onChange={this.onChange}/>
              </div>
              <div class="form-group">
               <label for="email">Email:</label>
                <input type="text" class="form-control" name="email" onChange={this.onChange}/>
              </div>
              <div class="form-group">
                <label for="title">Title:</label>
                <input type="text" class="form-control" name="title" onChange={this.onChange}/>
          </div>
          <div class="form-group">
            <label for="description">Description:</label>
            <input type="text" class="form-control" name="description" onChange={this.onChange}/>
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
          </div>
       </div>
      </div>
    );
      }
    }

export default Create;

Answer 1

The first rule of React is, You do not update state property directly (or React wouldn't know that the state has changed).

It's not easy to tell how React would behave if you do so.
So instead of setting the state value directly,

onChange = (e) => {
    const state = this.state
    state[e.target.name] = e.target.value;
    this.setState(state);
}

Change it like this and try to submit again.

onChange = (e) => {
    const state = this.state
    this.setState({[e.target.name]: e.target.value});
}