How to pass a function to another component?

Question

React

When passing a function to the console, it writes an error: TypeError: this.props.onSignIn is not a function

App.js

import React, { Component } from 'react'
import Auth from './Auth'
import Main from './Main'
import './style/style.css';

export default class App extends Component {
  constructor(props) {
    super(props)
  
    this.state = {
      user: [],
      isLogin: false,
    }
  }

  signIn(login, password) {
    console.log("Good")
    this.setState({
      user: {
        login,
        password,
      },
      isLogin:true		
    })
  }
  
  render() {
    return (
      <div>
        { (this.state.isLogin) ? <Main />  : <Auth onSignIn={this.signIn.bind(this)}/> }	
      </div>
    )
  }
}

SignIn.js

import React, { Component } from 'react'
import { Form, Input, Button, Checkbox } from 'antd';
import { Link } from "react-router-dom";
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import '../components/style/style.css'


export default class SignIn extends Component {

  onFinish = values => {
    console.log('Received values of form: ', values);
    let login = values.login;
    let password = values.password;
    this.props.onSignIn(login, password)
  }

  render() {
    return (
      <div className="sign_in">
            <Form
              name="normal_login"
              className="login-form"
              initialValues={{
              remember: true, }}
              onFinish={this.onFinish}>
              <h1>Опросник</h1>
              <Form.Item
                name="login"
                rules={[
                  {
                    required: true,
                    message: 'Укажите свой логин!',
                  },
                ]}>
                <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Логин" />
              </Form.Item>
              <Form.Item
                name="password"
                rules={[
                  {
                    required: true,
                    message: 'Введите пароль!',
                  },
                ]}
              >
                <Input
                  prefix={<LockOutlined className="site-form-item-icon" />}
                  type="password"
                  placeholder="Пароль"
                />
              </Form.Item>
              <Form.Item>
              <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox>Запомнить меня?</Checkbox>
              </Form.Item>

                <a className="login-form-forgot" href="/change_pass">
                  Забыли пароль?
                </a>
              </Form.Item>
              <Form.Item>
                <Button type="primary" htmlType="submit" className="login-form-button">
                  Войти
                </Button>
                или <Link to="/sign_up">зарегистрироваться сейчас</Link>
              </Form.Item>
            </Form>  
      </div>
    )
  }
}

Answer 1

This is because of the arrow function, it does not have its own this, it should be like this:

constructor(props) {
    super(props);
    this.onFinish = this.onFinish.bind(this);
}

onFinish(values) {
    console.log('Received values of form: ', values);
    let login = values.login;
    let password = values.password;
    this.props.onSignIn(login, password)
  }