TypeError: Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body

Question

I'm currently following the tutorial and kept getting the error above. Checked the source code of the project and nothing seemed to be wrong. I'm a just a beginner so I've haven't tried anything to change the code as I don't know much; only went as far as to search up the error but got nothing.

The fetch error is at the bottom of this code.

import React, { Component } from 'react';
import { TextField, Button, Grid, Typography } from "@material-ui/core";
import { Link } from "react-router-dom";

export default class RoomJoinPage extends Component { 

    constructor(props) { 
        super(props);
        this.state = {
            roomCode: "",
            error: ""
        }

        this._handleTextFieldChange = this._handleTextFieldChange.bind(this);
        this._roomButtonPressed = this._roomButtonPressed.bind(this)
    }

    render() { 
        return (
        <Grid container spacing={1} align="center">
            <Grid item xs={12}>
                <Typography component='h4' variant='h4'>
                    Join a Room
                </Typography>
                </Grid>
            <Grid item xs={12}>
                <TextField
                    error = {this.state.error}
                    label = "Code"
                    placeholder = "Enter a Room Code"
                    value = {this.state.roomCode}
                    halperText = {this.state.error}
                    variant = "outlined" 
                    onChange = { 
                        this._handleTextFieldChange
                    }
                />
            </Grid>
            <Grid item xs={12}>
                 <Button variant = "contained" color = "primary" to = "/" onClick = 
{this._roomButtonPressed}>
                    Enter Code
                </Button>
            </Grid>
            <Grid item xs={12}>
            <Button variant = "contained" color = "secondary" to = "/" component = {Link}>
                    Back
                </Button>
            </Grid>
        </Grid>
        );
    }

    _handleTextFieldChange(e) {
        this.setState({
            roomCode: e.target.value
        })
    }

Fetch error:

    _roomButtonPressed() {
        const requestOptions = {
            methods: "POST", 
            headers: {"Content-Type": "application/json" },
            body: JSON.stringify({
                code: this.state.roomCode,
            }),
        };
        fetch("/api/join-room", requestOptions)
        .then((response) => {
            if (response.ok) {
                this.props.history.push(`/room/${this.state.roomCode}`)
            } else {
                this.setState({error: "Room not found."})
            }
        })
        .catch((error) => {
            console.log(error);
        });
    }
}

Answer 1

I think the problem is that fetch is asynchronous, so you have to declare that in your code. You can use async and await to do that.

  async _roomButtonPressed() {
        const requestOptions = {
            methods: "POST", 
            headers: {"Content-Type": "application/json" },
            body: JSON.stringify({
                code: this.state.roomCode,
            }),
        };
        await fetch("/api/join-room", requestOptions)
        .then((response) => {
            if (response.ok) {
                this.props.history.push(`/room/${this.state.roomCode}`)
            } else {
                this.setState({error: "Room not found."})
            }
        })
        .catch((error) => {
            console.log(error);
        });
    }
}