Uncaught Error: Objects are not valid as a React child (found: [object Promise]).
import React, { useState,useEffect } from 'react';
import './App.css';
async function Login() {
const [username,setUsername] = useState("")
const [password,setPassword] = useState("")
async function handleSubmit({event) {
event.preventDefault
fetch("http://localhost:3001/api/login",{
method:"post",
headers:{
"Content-Type" : "application/json"
},
body:JSON.stringify({username:username,password:password})
})
const data = await response.json()
console.log(data.username)
}
return (
<div className="App">
<form onSubmit={handleSubmit}>
<input placeholder="username" value={username} onChange={ e => setUsername(e.target.value)} />
<input placeholder="password " value={password} onChange={ e => setPassword(e.target.value)}/>
<button type='submit' >Submit</button>
</form>
</div>
);
}
export default Login;
you forgot put await before calling method
async function handleSubmit(event) {
event.preventDefault()
let response = await fetch("http://localhost:3001/api/login",{
method:"post",
headers:{
"Content-Type" : "application/json"
},
body:JSON.stringify({username:username,password:password})
})
const data = await response.data
console.log(data.username)
}