I am getting the error "cannot read property "username" of undefined"

Question

signup.js

const Signup = () => {
    const [username, Username] = useState("");
    const [password, Password] = useState("");
    

    const Post = () => {
        fetch("/signup", {
            method: "post",
            headers: {
                "Content-Type":"application/json",
                "Accept":"application/json",
            },
            body: JSON.stringify({
                username: "",
                password: "",
            })
        })
        .then(response => response.json())
        .then(data => {
            console.log(data)
        })
    }

    return (
        <div>
            <input type="text" placeholder="username" value={username} onChange={ (e) => Username(e.target.value) }/>
            <br/>
            <input type="text" placeholder="password" value={password} onChange={ (e) => Password(e.target.value) }/>
            <br/>
            <button id="submit_button" onClick={ () => Post() }>Sign up</button>
        </div>
    )
}

function from auth.js from backend

router.post("/signup", (request, response) => {
    const username = request.body.username;
    const password = request.body.password;

    // If missing a field: error
    if (!username || !password) {
        response.status(422).json({ error: "Please add all fields" })
    }

    // Checks if there already exists an account with that username
    user.findOne({ username: username })
    .then ((saved_user) => {
        if (saved_user) {
            return response.status(422).json({ error: "There already exists an account with that username"})
        }
    })

    // Creates a new user and saves the account
    const user = new user({ username, password })
    user.save()
    .then(user => {
        response.json({ message: "Account Saved Sucessfully"})
    })
    .catch(error => {
        console.log(error)
    })
})

Does anyone know what's wrong? It seems like the json object I'm posting from signup.js as an undefined body for some reason. I already declared username as a constant earlier in the function though. IDK how to fix that.

Answer 1

Solved. Forgot to add App.use(express.json()); before routes.

Answer 2

You are not giving the username and password in the body

body: JSON.stringify({
                username: "",
                password: "",
            }).

const Signup = () => {
    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");
    

    const Post = () => {
        fetch("/signup", {
            method: "POST",
            headers: {
                "Content-Type":"application/json",
                "Accept":"application/json",
            },
            body: JSON.stringify({
                username: username,
                password: password,
            })
        })
        .then(response => response.json())
        .then(data => {
            console.log(data)
        })
    }

    return (
        <div>
            <input type="text" placeholder="username" value={username} onChange={ (e) => setUsername(e.target.value) }/>
            <br/>
            <input type="text" placeholder="password" value={password} onChange={ (e) => setPassword(e.target.value) }/>
            <br/>
            <button id="submit_button" onClick={ () => Post() }>Sign up</button>
        </div>
    )
}

Try to use like this , maybe it can work.