Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

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

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.

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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

about 4 years ago · Juan Pablo Isaza Report

0

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.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!