little background

so here we are using modal to show the form and then once the form field are changed we are updating the local state using useState so there is a function which will run on onChange and update the state using setMilestone

after that we will have a state once the form is filled

we will click on the button Save , that will dispatch the method for the addMilestone and we will be sending the object to this function.

this will internally call the actions --> reducers --> reducer will add that to the initial state.

Terms we have used here are

useState, useSelector, useDispatch, Modal, form, form group ,react-icons

import React, { useState } from 'react'
import Modal from 'react-bootstrap/Modal'
import Button from 'react-bootstrap/Button'
import './AddMilestone.css'
import { CurrencyDollar } from 'react-bootstrap-icons'
import { Form, FormControl } from 'react-bootstrap'
import {useSelector,useDispatch} from "react-redux"
import {addMilestoneAction} from "../../../../redux/actions/newcontractAction"

function AddMilestone() {
  //this is used to show the modal
  const [addMilestoneModal, showAddMilestoneModal] = useState(false)

  //here we are getting the global state
  const newcontractReducer = useSelector(state => state.newcontractReducer)
  const dispatch = useDispatch()

  //this is local state set to empty object
  const [milestone, setMilestone] = useState({
    name: '',
    amount: '',
    date: '',
    milestoneDescription: ''
  })

  //we are updating the local state useState once the input field value is changed
  const updateMilestone = (event, property) => {
    const target = event.target
    console.log(target)

    event.preventDefault()
    setMilestone((prevState) => ({
      ...prevState,
      [property]: event.target.value,
    }))
  }
  return (
    <div>
      <Button onClick={() => showAddMilestoneModal(true)}>Add Milestone</Button>
      <Form>
        <Modal
          size='lg'
          show={addMilestoneModal}
          onHide={() => showAddMilestoneModal(false)}
          aria-labelledby='example-modal-sizes-title-lg'
        >
          <Modal.Header closeButton>
            <Modal.Title id='example-modal-sizes-title-lg'>
              Add Milestone
            </Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <Form.Group>
              <Form.Label>Name of Milestone</Form.Label>
              <Form.Control
                type='text'
                placeholder='add collection name'
                value={milestone.name}
                onChange={(e) => updateMilestone(e, 'name')}
              ></Form.Control>
            </Form.Group>

            <Form.Group>
              <Form.Label>Amount</Form.Label>

              <Form.Control
                type='number'
                value={milestone.amount}
                onChange={(e) => updateMilestone(e, 'amount')}
              ></Form.Control>
            </Form.Group>

            <Form.Group>
              <Form.Label>Date</Form.Label>

              <Form.Control
                type='date'
                value={milestone.date}
                onChange={(e) => updateMilestone(e, 'date')}
              ></Form.Control>

              <Form.Group>
                <Form.Label>Description</Form.Label>

                <Form.Control
                  as='textarea'
                  rows={4}
                  value={milestone.milestoneDescription}
                  onChange={(e) => updateMilestone(e, 'milestoneDescription')}
                ></Form.Control>
              </Form.Group>
            </Form.Group>
          </Modal.Body>
          <Modal.Footer>
            <Button id='cancelMilestone' onClick={() => showAddMilestoneModal(false)}>
              Cancel
            </Button>
            <Button
              id='saveAndAddAnotherMilestone'
              type='submit'
            >
              Save and Add Another
            </Button>

            <Button
              id='saveMilestone'
              onClick={() => (dispatch(addMilestoneAction(milestone))
                ,showAddMilestoneModal(false)
                )}
              type='submit' 
            >
              Save 
            </Button>
          </Modal.Footer>
        </Modal>
      </Form>
    </div>
  )
}

export default AddMilestone