React Login and get Some user details isnt working

Viewed 21

the function bellow is called when the user submits a login form. The backend (which I already tested works well) will return a JSON Object which I want to save to my own "user" object state variable. So I call setUser() but it does not save nothing. Do you know why is it?

It is important to mention that the object is coming from the server. If I just console log the response it is there, but it does not go to the state.

const loginAttempt = (e, username, password) => {
       e.preventDefault();
        const details = {
            'username': username,
            'password': password
        };

        let formBody = [];
        for (let property in details) {
            let encodedKey = encodeURIComponent(property);
            let encodedValue = encodeURIComponent(details[property]);
            formBody.push(encodedKey + "=" + encodedValue);
        }
        formBody = formBody.join("&");
        console.log("formBody",formBody)
        fetch(serverPath + '/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
            },
            body: formBody
        }).then((response) => response.json())
            .then((theData) =>  setUser(theData)) //IT DOES NOT SET THE STATE AT ALL
            .then(()=>setLogged(true))
            .then(()=>console.log(user))  //NOTHING CHANGED
            //.then(()=>getUserData(user.username))


    };

Per request of one of you guys here it is the component that calls the function. Keep in mind that the functions goes to this Component in the props. The state to define is in the parent component as the function as well.

import React, {useState} from "react"; import {Button, Form, Modal} from "react-bootstrap";

function LoginForm(props){
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');

    const handleUsernameField = (e)=> setUsername(e.target.value);
    const handlePasswordField = (e)=>  setPassword(e.target.value);


    return(
        <Modal show={!props.logged } onHide={props.loginAttempt}
               backdrop="static"
               keyboard={false}
        >
            <Modal.Header closeButton>
                <Modal.Title>Login Form:</Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <Form>
                    <Form.Group className="mb-3" controlId="formBasicEmail">
                        <Form.Label>Email address</Form.Label>
                        <Form.Control type="email" placeholder="Enter email"
                            onChange={handleUsernameField}
                        />
                        <Form.Text className="text-muted">
                            We'll never share your email with anyone else.
                        </Form.Text>
                    </Form.Group>

                    <Form.Group className="mb-3" controlId="formBasicPassword">
                        <Form.Label>Password</Form.Label>
                        <Form.Control type="password" placeholder="Password"
                                      onChange={handlePasswordField}/>
                    </Form.Group>

                    <Button variant="primary" type="submit"
                            onClick={(e)=>props.loginAttempt(e,username,password)}>
                        Login now!
                    </Button>
                </Form>
            </Modal.Body>
            <Modal.Footer>

            </Modal.Footer>
        </Modal>
    );
}
export default LoginForm;
0 Answers
Related