Can't render auth page

Question

I am trying to set firebase authentication. I have two components. First one is App here with firebase.auth().currentUser I am checking is there a loged in user and after that I render page if there is such user, if not I render a login page. The second component I'm just getting handlers from parent and trying to render login page. Now I see just blank page and an error "'props' is not defined". Please help me to fix it.

App.js

import React, {Component} from "react";
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from "react-router-dom";
import { Layout } from 'antd';
import AddStock from './components/stocksDB/addStock';
import { Typography, Menu } from 'antd';
import 'antd/dist/antd.css';
import './App.css';
import AddClient from './components/clients/addClient.js';
import PifForm from './components/clients/pif/pifForm';
import KuaForm from './components/clients/pif/kuaForm';
import firebase from './firebase.js';
import {Login} from './components/login.js'

const { Title } = Typography;

const {Header, Footer, Content} = Layout;

class App extends Component {
    constructor(props){
        super(props);
        this.state = {
            login: '',
            password: ''
        }
    }

    handleChange = (event) => {
        const target = event.target;
        const name = target.name;
        this.setState({
            [name]: target.value
        }, () => {console.log(name, this.state)})
    };

    signUp = () => {
        firebase.auth().createUserWithEmailAndPassword(this.state.login, this.state.password).catch(function(error) {
            console.log(error);
        })
    };

    signIn = () => {
        firebase.auth().signInWithEmailAndPassword(this.state.login, this.state.password).catch(function(error) {
            console.log(error);
        })
    };

    onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
    };

    render() {
        let user = firebase.auth().currentUser;
        if (user) {
            return (
                <Router>
                    <Layout theme='dark'>
                        <Header mode="horizontal">
                            <div className='header-wrapper'>
                                <Title level={2} style={{"color": "rgb(166 173 180)"}}>Оберіть функцію:</Title>
                                <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
                                    <Menu.Item key="1">
                                        <Link to='/stocksList'>Довідник ЦП</Link>
                                    </Menu.Item>
                                    <Menu.Item key="2">
                                        <Link to='/addClients'>Довідник клієнтів</Link>
                                    </Menu.Item>
                                </Menu>
                            </div>
                        </Header>
                        <Content>
                            <Switch>
                                <Route path="/stocksList">
                                    <AddStock/>
                                </Route>
                                <Route path="/addClients">
                                    <AddClient/>
                                </Route>
                                <Route path="/kuaForm">
                                    <KuaForm/>
                                </Route>
                                <Route path="/pifForm">
                                    <PifForm/>
                                </Route>
                            </Switch>
                        </Content>
                        <Footer>Footer</Footer>
                    </Layout>
                </Router>
            )
        } else {
            return (
                <Login signIn={this.signIn} onFinishaedFailed={this.onFinishFailed} handleChange={this.handleChange} signUp={this.signUp} />
            )
        }
    }
}

export default App;

Login.js

import React from 'react';
import { Form, Input, Button } from 'antd';
import { Typography  } from 'antd';

const { Title } = Typography;

export const Login = () => {
    const layout = {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 },
    };
    const tailLayout = {
        wrapperCol: { offset: 8, span: 16 },
    };

    return (
        <div>
            <Title level={2} style={{ "color": "rgb(166 173 180)" }}>Для продовження роботи пройдіть автентифікацію.</Title>

            <Form
                {...layout}
                name="basic"
                initialValues={{ remember: true }}
                onFinish={props.signIn()}
                onFinishFailed={this.props.onFinishFailed()}
            >
                <Form.Item
                    label="Username"
                    name="username"
                    rules={[{ required: true, message: 'Please input your username!' }]}
                >
                    <Input name='login' onChange={this.props.handleChange()}/>
                </Form.Item>

                <Form.Item
                    label="Password"
                    name="password"
                    rules={[{ required: true, message: 'Please input your password!' }]}
                >
                    <Input.Password name='password' onChange={this.props.handleChange()}/>
                </Form.Item>

                <Form.Item {...tailLayout}>
                    <Button type="primary" htmlType="submit">
                        Увійти
                    </Button>

                    <Button type="primary" htmlType="button" onClick={this.props.signUp()}>
                        Зареєструватися
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
};

Answer 1

Since Login is a functional component, you need to pass in and define the props like this: const Login = (props) => { . You can then access the props using props.handleChange and props.signUp .

No need to use this like in the Class based component as this is not defined inside the functional component.

Answer 2

You are calling props but you haven't defined it in your functional component.

export const Login = (props) => {
...

}