How to use react-bootstrap to create form and submit ?

sandeep negi's photo
sandeep negi
·

2 min read

Here we have uses the Form from react-bootstrap , we have also uses modal for the showing the content and then we are updating the state of the object --> onChange we are updating the state of the object and then when submitting the form we will call a method by which we will submit the form

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'

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

  const [milestone, setMilestone] = useState({
    name: '',
    amount: '',
    date: '',
    description: '',
  })

  const addMilestone = (e) => {
    console.log('submittting milestone')
  }

  const updateMilestone = (event, property) => {
    const target = event.target
    console.log(target)

    event.preventDefault()
    setMilestone((prevState) => ({
      ...prevState,
      [property]: event.target.value,
    }))
  }

  return (
    <div>
      <Button onClick={() => setLgShow(true)}>Add Milestone</Button>
      <Form>
        <Modal
          size='lg'
          show={lgShow}
          onHide={() => setLgShow(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.description}
                  onChange={(e) => updateMilestone(e, 'description')}
                ></Form.Control>
              </Form.Group>
            </Form.Group>
          </Modal.Body>
          <Modal.Footer>
            <Button id='cancelMilestone' onClick={() => setLgShow(false)}>
              Cancel
            </Button>
            <Button
              id='saveAndAddAnotherMilestone'
              onClick={(e) => addMilestone(e)}
              type='submit'
            >
              Save and Add Another
            </Button>
            <Button
              id='saveMilestone'
              onClick={(e) => addMilestone(e)}
              type='submit'
            >
              Save
            </Button>
          </Modal.Footer>
        </Modal>
      </Form>
    </div>
  )
}

export default AddMilestone
Reactforms