This is my code that I am using to try and log in to my react/flask app:
const logitin = ({username, password}) => {
console.log('this place',username, password)
function loginuser({username, password}) {
fetch(`http://localhost:5000/userlookup`, {
'method':'POST',
mode: 'cors',
headers: {
'Content-Type':'application/json'
},
body: JSON.stringify(username, password)
})
.catch(error => console.log('error time!', username, password))
}
return (<div>{loginuser()}</div>)
}
console.log('that place', username, password)
logitin({username, password})
the line that says console.log('this place', username, password) and console.log('that place', username, password) tells me exactly what I expect the username and password are.
This is the error I'm getting: TypeError: (destructured parameter) is undefined
This function declaration here:
function loginuser({username, password}) {
creates a new scope for the variables username and password, and destructures them from the passed in argument.
That function is called here:
return (<div>{loginuser()}</div>)
Without any argument. This means that login user will start by attempting to do:
{ username, password } = undefined
Which is the type error that you are recieving.
Beyond that, you shouldn't be calling functions in JSX like this.
Either make this an ordinary function:
const logitin = async ({ username, password }) => {
try {
await fetch(`http://localhost:5000/userlookup`, {
method: "POST",
mode: "cors",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(username, password),
});
return true;
} catch (error) {
console.log("error time!", username, password);
return false;
}
};
This will return true/false depending on if the request succeeded.
Or if this is a react component, use a useEffect:
const logitin = ({ username, password }) => {
useEffect(() => {
function loginuser() {
fetch(`http://localhost:5000/userlookup`, {
method: "POST",
mode: "cors",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(username, password),
})
.then(() => {
// update global state, redirect somewhere, idk
})
.catch((error) => console.log("error time!", username, password));
}
loginuser();
}, []);
return <div>Logging in...</div>
};