How to Pass a function from Child component to Parent Component in React

Question

I am working with React, In that I have one Parent component that is App.js. In that Parent component I have one Child component that is Child.js and I have two Buttons Signup and Login. In Child component I have signup form and login form by default in output I have to show Signup form and When I click Login button I have to show only Login form. Here the Logic is I need to pass functions from child to parent component

This is App.js

import React from "react";
import { Button, Row, Col } from "antd";
import 'antd/dist/antd.css';
import Child from "./Child/Child";
import "./App.css";

const App = () => {
  return (
    <div style={{display: "flex", justifyContent: "center", marginTop: "50px"}}>
      <Row>
        <Col span={24}>
          <Button type="primary">Signup</Button>
          <Button type="primary"  style={{marginLeft: "10px"}}>Login</Button>
          <Child />
        </Col>
      </Row>
    </div>
  )
}

export default App

This is Child.js

import React, { useState } from "react";
import { Button } from "antd";
import { Form, Input } from 'antd';
import "./Child.css";

const Child = () => {
    const [showSignupForm, setSignupForm] = useState(true)
    const [hideLoginForm, setHideLoginForm] = useState(false)

    const showLoginForm = () => {
        setHideLoginForm(true)
        setSignupForm(false)
    }

    const viewSignupForm = () => {
        setHideLoginForm(false)
        setSignupForm(true)
    }

    return (
        <div>
            {showSignupForm &&
                <Form style={{ marginTop: "50px" }}
                    name="basic"
                    labelCol={{
                        span: 8,
                    }}
                    wrapperCol={{
                        span: 16,
                    }}
                    initialValues={{
                        remember: true,
                    }}
                >
                    <Form.Item
                        label="Firstname"
                        name="firstname"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your firstname!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="Lastname"
                        name="lastname"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your lastname!',
                            },
                        ]}
                    >


                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="Email"
                        name="email"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your email!',
                            },
                        ]}
                    >


                        <Input />
                    </Form.Item>

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

                    <Form.Item
                        wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}
                    >
                        <Button type="primary" htmlType="submit">
                            Submit
                        </Button>
                    </Form.Item>
                </Form>
            }
            {hideLoginForm &&
                <Form style={{ marginTop: "50px" }}
                    name="basic"
                    labelCol={{
                        span: 8,
                    }}
                    wrapperCol={{
                        span: 16,
                    }}
                    initialValues={{
                        remember: true,
                    }}
                >
                    <Form.Item
                        label="Username"
                        name="username"
                        rules={[
                            {
                                required: true,
                                message: 'Please input your username!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

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

                    <Form.Item
                        wrapperCol={{
                            offset: 8,
                            span: 16,
                        }}
                    >
                        <Button type="primary" htmlType="submit">
                            Submit
                        </Button>
                    </Form.Item>
                </Form>
            }
        </div>
    )
}

export default Child

Answer 1

you just need One useState Here, you can define Your hook

const [fromType, setFormType] = useState("login")

in parent Component and then Pass formType to child by props, like this :

<Child formType={formType} />

then , in your Child Component write

{ props.formType === "login" ? ( retrun login form ) : ( retrun singup form )}

then for change Your Forms set Onclick event on the buttons like this :

<Button onClick={()=>{setFormType("singup")}}>Signup</Button>

<Button onClick={()=>{setFormType("login")}}>Login</Button>