Cannot read property 'value' of undefined Error on Modal Popup

Question

I am new to react and am trying to implement this code. However I am getting this error:

handleSubmit
D:/React/employee-app/src/components/AddDepModal.js:14
  11 |    handleSubmit(event){
  12 |        event.preventDefault();
  13 | 
> 14 |        alert(event.target.DeptartmentName.value);
     | ^  15 |    }
  16 | 
  17 | 
View compiled

I am trying to get the alert function going on clicking the button of my modal pop up.

I am using on submit button to get the value from the text

Here is the code:

export class AddDepModal extends Component{
    constructor(props){
    super(props);
    }


    handleSubmit(event){
        event.preventDefault();

        alert(event.target.partmentNameo.value);
    }


render(){
    return(
        <Modal
      {...this.props}
      size="lg"
      aria-labelledby="contained-modal-title-vcenter"
      centered
    >
      <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-vcenter">
          Add Department
        </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <div className="container">
            <Row>
                <Col sm={6}>
                    <Form onSubmit={this.handleSubmit}>
                      <Form.Group controlId="DepartmentName">
                          <Form.Label>Department Name</Form.Label>
                          <Form.Control
                              type = "text"
                              name="DepartmentName"
                              required
                              placeholder="Department Name"
                              />
                      </Form.Group>
                      <Form.Group>
                          <Button variant="primary" type ="submit">
                              Add Department
                          </Button>
                      </Form.Group>
                    </Form>
                </Col>
                </Row>
        </div>
      </Modal.Body>
      <Modal.Footer>
        <Button variant= "danger" onClick={this.props.onHide}>Close</Button>
      </Modal.Footer>
    </Modal>
    );
}}

export default AddDepModal;

This should work but I am not getting why it doesn't. Please help.

Answer 1

Change alert(event.target.DeptartmentName.value); to alert(event.target.DepartmentName.value);