I'm pretty new to React, I have an simple app where the user can login via modal window that is displayed when the button "Login" it's clicked. User data is stored in a MongoDB collection, to validate the email and password entered by the user in the modal window the app send a request to a service that returns the data of the logged user or nothig if any error happens. If the user exists, the id is stored in local storage, then it must be redirected to another page. The problem is that apparently the method 'onSession' does not exist thus generating the warning: "Unknown property of the event handler onSession".

I have created three components: "LoginForm.js", "LoginModal.js" and "Menu.js". The first has the fields for the email and password and the validations for the login, the second has the properties of the modal window and the last one is for a navigation bar where the "Login" button is displayed.

LoginForm.js:

import React from 'react';
import { Col, Row, Form, Stack, Button, Image } from 'react-bootstrap';
import LoginIMG from '../../../assets/login.png'
import './LoginForm.css';

class LoginForm extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
           email: '',
           password: ''
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
}

handleSubmit(event) {
    event.preventDefault();
    if(this.state.email === '' || this.state.password === '') {
        alert('You must fill all inputs');
    }else{
        fetch('http://localhost:8080/api/user/' this.state.email '/' this.state.password)
        .then(res => res.json())
        .then(data => {
            if(data.id !== null) {
                localStorage.setItem('idUser', data.id);
                this.props.onHide();
                this.props.onSession();
            }else{
                alert('Wrong password or username');
            }
        });
    }
}

handleChange(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;
    this.setState({
        [name]: value
    });
}


render() {
    return (
        <div className="form">
            <br />
            <Row className="justify-content-md-center">
                <Form onSubmit={this.handleSubmit}>
                    <Stack gap={3}>
                        <Row className="justify-content-md-center">
                            <Col lg={6} md={4} className='text-center'>
                                <Image src={LoginIMG} className="avatar" roundedCircle />
                            </Col>
                        </Row>
                        <Row className="justify-content-md-center">
                            <Col lg={6}>
                                <Form.Group controlId="formEmail">
                                    <Form.Label>Email</Form.Label>
                                    <Form.Control type="email" name="email" value={this.state.email} onChange={this.handleChange} placeholder="Enter email" />
                                </Form.Group>
                            </Col>
                        </Row>
                        <Row className="justify-content-md-center">
                            <Col lg={6}>
                                <Form.Group controlId="formPassword">
                                    <Form.Label>Password</Form.Label>
                                    <Form.Control type="password" name="password" value={this.state.password} onChange={this.handleChange} />
                                </Form.Group>
                            </Col>
                        </Row>
                        <Row className="justify-content-md-center">
                            <Col lg={6} className="d-grid gap-2">
                                <Button type="submit" variant="success" size="lg">Login</Button>
                            </Col>
                        </Row>
                    </Stack>
                </Form>
            </Row>
        </div>
    );
  }
}

export default LoginForm;

LoginModal.js:

import LoginForm from '../../forms/loginForm/LoginForm'
import { Modal } from 'react-bootstrap'; 
import './LoginModal.css';

function LoginModal(props){
   return (
       <Modal {...props} size="lg" aria-labelledby="contained-modal-title-vcenter" centered>
           <Modal.Header closeButton>
              <Modal.Title id="contained-modal-title-vcenter">
                 {props.title}
              </Modal.Title>
           </Modal.Header>
           <Modal.Body>
               <LoginForm onHide={props.onHide} />
           </Modal.Body>
        <Modal.Footer>
            {/* <Button onClick={props.onHide}>Close</Button> */}
        </Modal.Footer>
    </Modal>
   );
}

export default LoginModal;

Menu.js:

import React from 'react';
import {Navbar, Nav, Container} from 'react-bootstrap';
import { Link } from "react-router-dom";
import LoginModal from '../../modals/loginModal/LoginModal';
import { useState } from 'react';


function Menu(){
    const [modalShow, setModalShow] = useState(false);
    const [idUser, setIdUser] = useState(0);

    const setSession = () => {
        if(localStorage.getItem('idUser') != null){
           setIdUser(localStorage.getItem('idUser'));
           console.log(idUser);
        }
    }

return(
    <>
        <Navbar bg="dark" expand="lg" variant="dark">
            <Container>
                <Link className='navbar-brand' to="/">Divina Comedia</Link>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="me-auto">
                        <Link className='nav-link' to="/">Home</Link>
                        {idUser === 0 ? <Nav.Link id="login" onClick={() => setModalShow(true)}>Login</Nav.Link> : null }
                        {idUser !== 0 ? <Link className='nav-link' to="/orders">Orders</Link> : null }
                    </Nav>
                </Navbar.Collapse>
            </Container>
        </Navbar>
        <LoginModal show={modalShow} onHide={() => setModalShow(false)} onSession={() => setSession()} />
    </>
   );
}

export default Menu;

I'm really don't know what is wrong, any help is appreciated.

CodePudding user response：

onSession={() => setSession()}

This gets passed into LoginModal, which then passes it into Modal here in LoginModal.js:

<Modal {...props}

And Modal ultimately ends up putting it on a <div>. There is no dom event with that name, and thus you are getting the error.

If that prop is intended for LoginModal, then make sure you deal with it there, and don't pass it on to Modal using the spread syntax. For example:

function LoginModal({ onSession, ...rest }){
  // Do something with the onSession prop

  return (
    <Modal {...rest} size="lg" aria-labelledby="contained-modal-title-vcenter" centered>
    // Or maybe do something with it here?
  )
}