Modal React From Function

import React from 'react'
import classnames from "classnames"
import { InertiaLink, Link } from '@inertiajs/inertia-react'
import { Row, Col, Button, Modal, Form, Input, InputGroup, InputGroupAddon, InputGroupText, Label, FormGroup } from 'reactstrap'
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table'
import 'react-bootstrap-table/dist/react-bootstrap-table-all.min.css'

function filterType(cell) {
    return cell.type;
}

function actionFormatter(cell) {
    return <Button className='btn btn-primary btn-sm' onClick={() => this.setFormModal(true)} value='${cell}'>Update Data</Button>
}

function TableComponents() {
    const [formModal, setFormModal] = React.useState(false);
    const [emailFocus, setEmailFocus] = React.useState(false);
    const [passwordFocus, setPasswordFocus] = React.useState(false);

    // Data For Datatable
    var data                    = [
        {
            no              : 1,
            id              : 1,
            nama            : 'Febima Hermawan',
            klpd            : 'Bagian Administrasi Pembangunan',
            no_id           : '123456789012345678',
            status          : 'Administrator',
        },
        {
            no              : 2,
            id              : 2,
            nama            : 'Danang Dismantoro',
            klpd            : 'Bagian Administrasi Pembangunan',
            no_id           : '123456789012345678',
            status          : 'PA/KPA',
        }
    ]

    // Konfiguration Table
    const options = {
        sizePerPageList: [
            {
                text    : '5',
                value   : 5
            },
            {
                text    : '10',
                value   : 10
            },
            {
                text    : '50',
                value   : 50
            },
            {
                text    : '75',
                value   : 75
            },
            {
                text    : '100',
                value   : 100
            }
        ],
        sizePerPage             : 5,
        page                    : 1,
        pageStartIndex          : 1,
        prePage                 : 'Prev',
        nextPage                : 'Next',
        firstPage               : 'First',
        lastPage                : 'Last',
        paginationPosition      : 'bottom'
    };

    return (
        <React.Fragment>
            <Row>
                <Modal modalClassName="modal-black" isOpen={formModal} toggle={() => setFormModal(false)} >
                    <div className="modal-header justify-content-center">
                        <button className="close" onClick={() => setFormModal(false)}>
                            <i className="tim-icons icon-simple-remove text-white" />
                        </button>
                        <div className="text-muted text-center ml-auto mr-auto">
                            <h3 className="mb-0">Sign in with</h3>
                        </div>
                    </div>
                    <div className="modal-body">
                        <div className="btn-wrapper text-center">
                            <Button className="btn-neutral btn-icon" color="default" href="#pablo" onClick={(e) => e.preventDefault()} >
                                <img alt="..." src={require("../../../../assets/img/github.svg")} />
                            </Button>
                            <Button className="btn-neutral btn-icon" color="default" href="#pablo" onClick={(e) => e.preventDefault()} >
                                <img src={require("../../../../assets/img/google.svg")} alt="..." />
                            </Button>
                        </div>
                        <div className="text-center text-muted mb-4 mt-3">
                            <small>Or sign in with credentials</small>
                        </div>
                        <Form role="form">
                            <FormGroup className="mb-3">
                                <InputGroup className={classnames("input-group-alternative", { "input-group-focus": emailFocus, })} >
                                    <InputGroupAddon addonType="prepend">
                                        <InputGroupText>
                                            <i className="tim-icons icon-email-85" />
                                        </InputGroupText>
                                    </InputGroupAddon>
                                    <Input placeholder="Email" type="email" onFocus={(e) => setEmailFocus(true)} onBlur={(e) => setEmailFocus(false)} />
                                </InputGroup>
                            </FormGroup>
                            <FormGroup>
                                <InputGroup className={classnames("input-group-alternative", { "input-group-focus": passwordFocus,  })} >
                                    <InputGroupAddon addonType="prepend">
                                        <InputGroupText>
                                            <i className="tim-icons icon-key-25" />
                                        </InputGroupText>
                                    </InputGroupAddon>
                                    <Input placeholder="Password" type="password" onFocus={(e) => setPasswordFocus(true)} onBlur={(e) => setPasswordFocus(false)} />
                                </InputGroup>
                            </FormGroup>
                            <FormGroup check className="mt-3">
                                <Label check>
                                    <Input defaultChecked type="checkbox" />
                                    <span className="form-check-sign" />
                                    Remember me!
                                </Label>
                            </FormGroup>
                            <div className="text-center">
                                <Button className="my-4" color="primary" type="button">
                                    Sign in
                                </Button>
                            </div>
                        </Form>
                    </div>
                </Modal>
                <Col lg="12" sm="12">
                    <BootstrapTable data={ data } search={ true } multiColumnSearch={ true } pagination={true} options={options}>
                        <TableHeaderColumn row='0' width='50' dataField='no' dataSort={true} isKey>No</TableHeaderColumn>
                        <TableHeaderColumn row='0' width='300' dataField='nama' dataSort={true}>Nama Pengguna</TableHeaderColumn>
                        <TableHeaderColumn row='0' width='300' dataField='no_id' dataSort={true}>No. Identitas</TableHeaderColumn>
                        <TableHeaderColumn row='0' width='150' dataField='klpd' dataSort={true}>Nama K/L/P/D</TableHeaderColumn>
                        <TableHeaderColumn row='0' width='150' dataField='status' dataSort={true}>Status</TableHeaderColumn>
                        <TableHeaderColumn row='0' width='150' dataField='id' filterValue={ filterType } dataFormat={ actionFormatter }>Action</TableHeaderColumn>
                    </BootstrapTable>
                </Col>
            </Row>
        </React.Fragment>
    )
}

export default TableComponents