Facing error in my code as frontend integration with backend

February 19, 2024

I’m new at react as I’m building TODO application and I’m facing few error in my code as my code is not running properly and I also want to add one feature as if any error occured in the api I’m able to show it in my frontend.

After fixing all these things I want to know how navigation will works as I want to navigate to the create-todo route.

import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom';

export default function LoginPage() {
const[username , setUsernamne] = useState("");
const[password , setPassword] = useState("");
const navigate = useNavigate();
return (
<div>
.
.
.

</div>

<div style={{ paddingTop: "18px", paddingLeft: "10px", }}>
    <button onClick={async ()=>
        { await fetch("http://localhost:3005/signin",{ method: "POST", body: JSON({
        username: username, password: password }), headers:{ "content-type": "application/json",
        } }).then(async function(res){ const json = await res.json(); console.log(json);
        }) }} >Login
    </button>
</div>
)
}

>Solution :

Here’s is you updated with all your required features as well as the also added the route of create-todo.

Errors to be solved:-

1- "The body cannot be defined only as JSON; you have to specify the conversion of JavaScript into the string, which is done by using ‘JSON.stringify’."

2- "As mentioned in your ‘content-type,’ which is incorrect, you should define it as ‘Content-Type’: ‘application/json’."

3- Use try/catch for apply errors in our frontend.

import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom';

export default function LoginPage() {
    const[username , setUsernamne] = useState("");
    const[password , setPassword] = useState("");
    const navigate = useNavigate();
  return (
        <div>
         .
         .

        </div>
        <div style={{
            paddingTop:"18px",
            paddingLeft:"10px",
        }}>
            <button
                onClick={async ()=>{
                    try{
                        const response = await fetch("http://localhost:3005/signin",{
                            method: "POST",
                            body: JSON.stringify({
                                username: username,
                                password: password
                            }),
                            headers:{
                                "Content-type": "application/json",       
                            }
                        })
                        console.log(response);
                        if(!response.ok){
                            const errData = await response.json();
                            alert(errData.msg); // {backend error message }
                        }else{
                            navigate('/create-todo')
                        }
                    }catch(e){
                        alert("something error occured");
                    }
                }}
            >Login</button>
        </div>
    </div>
  )
}