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.

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>
  )
}