Data coming from frontend duplicates in backend twice

Question

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 = (e) => {
        fetch("http://localhost:4000/signup", {
            method: "POST",
            headers: {
              "Content-type": "application/json",
              'Accept': '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>
              <p className="message">Do you have an account? <a href="login">Login</a></p>
            </form>
          </div>
        )
    }
}

Node.js

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

I'm trying to get a signup working with reactjs and nodejs but the data I get in nodejs are duplicated twice.

I'm sending a request of my username, email and password from frontend and in the backend it duplicates. For example the data I send gets sent twice in backend. If I were to send {username: 'hello', email: [email protected], password: 2323} in backend console.log(req.body) it would come twice {username: 'hello', email: [email protected], password: 2323}, {username: 'hello', email: [email protected], password: 2323}.

Anyone might have an idea why this is happening, would help a lot!

MattB MattB · Accepted Answer · 2020-11-10T19:23:46

This is most likely because you have the button click executing this.newUser and the function onSubmit is also triggered when you click the button.

I'd suggest leaving the onSubmit in the form tag, and remove the onClick in the button.

Data coming from frontend duplicates in backend twice

1 Answers