How to send form from reactjs to nodejs

Question

I'm building a signup page and I'm trying to send data from react inputs to nodejs. I have tried different methods and the current on returns undefined.

class SignUp extends React.Component {
    constructor() {
        super();
        this.state = {
            username: '',
            email: '',
            password: ''
        }
    }

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

    newUser = () => {
        fetch('http://localhost:4000/signup', {
        method: "POST",
        headers: {
            'Content-type': 'application/json'
        },
        body: JSON.stringify(this.state)
        })
        .then((response) => response.json())
        .then((result) => {
        console.log(result)
        })
    }

    render() {
        return (
        <div>
            <form action="http://localhost:4000/signup" method="POST">
                <input onChange={this.onChange} type="text" name="username" placeholder="Username" />
                <input onChange={this.onChange} type="text" name="email" placeholder="Email" />
                <input onChange={this.onChange} type="password" name="password" placeholder="Password"/>
                <button onClick={this.newUser}>Sign Up</button>
            </form>
        </div>
        )
    }
}

node.js/express - returns undefined when I console.log(req.body)

router.post('/signup', (req, res) => {
    console.log(req.body)
});

Answer 1

Use onSubmit event on the form element

import React from "react";
import "./styles.css";

export default class SignUp extends React.Component {
  constructor() {
    super();
    this.state = {
      username: "",
      email: "",
      password: ""
    };
  }

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

  onSubmit = (e) => {
    e.preventDefault();
    console.log(this.state);

    this.newUser();
  };

  newUser = () => {
    fetch("http://localhost:4000/signup", {
      method: "POST",
      headers: {
        "Content-type": "application/json"
      },
      body: JSON.stringify(this.state)
    })
      .then((response) => response.json())
      .then((result) => {
        console.log(result);
      });
  };

  render() {
    return (
      <div>
        <form onSubmit={this.onSubmit}>
          <input
            onChange={this.onChange}
            type="text"
            name="username"
            placeholder="Username"
          />
          <input
            onChange={this.onChange}
            type="text"
            name="email"
            placeholder="Email"
          />
          <input
            onChange={this.onChange}
            type="password"
            name="password"
            placeholder="Password"
          />
          <button onClick={this.newUser}>Sign Up</button>
        </form>
      </div>
    );
  }
}

https://codesandbox.io/s/pensive-benz-3iwje?file=/src/App.js