Modal Form

import React, { useState } from 'react';
import { Modal, Container, Row, Col, Button } from 'react-bootstrap';
import { Field, reduxForm } from 'redux-for m';
import InputComponent from '../InputComponent/InputComponent';
import styles from './ModalForm.module.css'

function ModalForm(props) {

const closeModalForm = (event) => {
    props.onHide()
    setColorBg(null)
}

const { handleSubmit } = props;

const [colorBg, setColorBg] = useState(null)

return (
    <Modal {...props} aria-labelledby="contained-modal-title-vcenter" contentClassName={colorBg ? styles.[colorBg] : null}>
        <Modal.Header closeButton>
            <Modal.Title id="contained-modal-title-vcenter">
                Create board
            </Modal.Title>
        </Modal.Header>
        <Modal.Body className="show-grid">
            <form onSubmit={handleSubmit}>
                <Container>
                    <Row>
                        <Col xs={12} md={6}>
                            <Field name="title" labelFor={'title'} placeholder={'Title'} type="text" component={InputComponent} />
                        </Col>
                        <Col xs={12} md={4}>
                            <div>
                                <Container className={styles.bgColor}>
                                    <Row className={styles.bgChoose}>
                                        <Col md={4}>
                                            <label className={styles.redBg} onClick={() => setColorBg('redBg')}><Field name="bgColor" component={InputComponent} type="radio" value="red" /></label>
                                        </Col>
                                        <Col md={4}>
                                            <label className={styles.greenBg} onClick={() => setColorBg('greenBg')}><Field name="bgColor" component={InputComponent} type="radio" value="green" /></label>
                                        </Col>
                                        <Col md={4}>
                                            <label className={styles.blueBg} onClick={() => setColorBg('blueBg')}><Field name="bgColor" component={InputComponent} type="radio" value="blue" /></label>
                                        </Col>
                                    </Row>
                                </Container>
                            </div>
                        </Col>
                    </Row>

                    <Row>
                        <Col xs={6} md={4}>
                            <Field class="form-select" name="priority" component="select">
                                <option disabled>Your priority</option>
                                <option value="high">High</option>
                                <option value="normal">Normal</option>
                                <option value="low">Low</option>
                            </Field>
                        </Col>
                    </Row>
                    <Row>
                        <Col style={{ marginBlock: '20px' }}>
                            <Field class="form-select" aria-label="Default textarea example" name="description" component="textarea" style={{ resize: 'none' }} placeholder='Description...'></Field>
                        </Col>
                    </Row>
                </Container>
                <Modal.Footer>
                    <Button type="submit" onClick={closeModalForm}>Create</Button>
                </Modal.Footer>
            </form>
        </Modal.Body >
    </Modal >
);
}


ModalForm = reduxForm({
form: 'modalForm',
initialValues: {
    title: '',
    priority: 'low',
    description: '',
    bgColor: ''
}
})(ModalForm);

export default ModalForm;

Create board

import React, { useState } from 'react';
import styles from './CreateBoard.module.css';
import { connect, useDispatch } from 'react-redux';
import ModalForm from '../../core/ModalForm/ModalForm';
import { Button } from 'react-bootstrap';
import { reset } from 'redux-form';
import { createBoard } from '../../../actions/border-actions';


const CreateBoard = (props) => {

const [modalShow, setModalShow] = useState(false);
const { createBoard } = props
const dispatch = useDispatch()

const onSubmit = (values) => {
    console.log(values)
    dispatch(reset('modalForm'))
    createBoard(values)
}

return <div className={styles.createBoardContainer}>
    <Button variant="btn btn-light" onClick={() => setModalShow(true)}>
        Launch modal with grid
    </Button>

    <ModalForm show={modalShow} onHide={() => setModalShow(false)} onSubmit={onSubmit} />
</div>
}

export default connect(
null,
{ createBoard }
)(CreateBoard);