React hooks component 2

import React, { useEffect, useState } from 'react';
import * as PropTypes from 'prop-types';
import { Modal } from 'react-bootstrap';
import UserAssignmentPreviewModalStyle from './UserAssignmentPreviewModal.css';
import buttonStyle from '../../common/Buttons.css';
import api from '../../api';

function UserAssignmentsPreviewModal(props) {
  const [userAssignmentInfo, setUserAssignmentInfo] = useState([]);
  const [userAssignmentQualifications, setUserAssignmentQualifications] = useState([]);
  const [availableToApply, setAvailableToApply] = useState([]);

  useEffect(() => {
    setUserAssignmentInfo(props.userAssignmentInfo);
    setUserAssignmentQualifications(props.userAssignmentQualifications);
    setAvailableToApply(props.availableToApply);
  }, []);

  const qualifications = userAssignmentQualifications.map((qualification, index) => {
    return <div key={index}>{qualification}</div>;
  });

  function handleApplication() {
    const { userId: id } = props;
    const postBody = {
      reasonForApplying: 'none',
      linkedInLink: 'none',
      cvFileURL: 'none',
      userAssignment: {
        id: userAssignmentInfo.userAssignment.id,
      },
    };
    api.user_assignment_application.createByID(postBody, id).then(setAvailableToApply(false));
  }

  return (
    <Modal
      show={props.showModal}
      backdrop
      onHide={props.handleCloseModal}
      size="lg"
      aria-labelledby="contained-modal-title-vcenter"
      centered
    >
      <Modal.Header closeButton>
        <Modal.Title className={UserAssignmentPreviewModalStyle.modalHeadline}>
          {userAssignmentInfo.headline}
          {props.availableToApply}
        </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <div>
          <div className={UserAssignmentPreviewModalStyle.modalSubheadline}>
            {userAssignmentInfo.subheadline}
          </div>
          <div className={UserAssignmentPreviewModalStyle.descriptionQualificationsContainer}>
            <div className={UserAssignmentPreviewModalStyle.modalDescription}>
              {userAssignmentInfo.description}
            </div>
            <div className={UserAssignmentPreviewModalStyle.modalQualifications}>
              <div className={UserAssignmentPreviewModalStyle.modalEstimatedtime}>
                <div>Estimated time (hours)</div>
                <div>{userAssignmentInfo.estimatedTime}</div>
              </div>
              {qualifications}
            </div>
          </div>
          <div className={UserAssignmentPreviewModalStyle.modalPrerequisitesWorkLocationContainer}>
            <div className={UserAssignmentPreviewModalStyle.modalPrerequisites}>
              <div className={UserAssignmentPreviewModalStyle.sectionHeadline}>Prerequisites</div>
              {userAssignmentInfo.prerequisites}
            </div>
            <div className={UserAssignmentPreviewModalStyle.modalWorkLocation}>
              <div className={UserAssignmentPreviewModalStyle.sectionHeadline}>Work location</div>
              {userAssignmentInfo.workLocation}
            </div>
          </div>
          <div className={UserAssignmentPreviewModalStyle.modalDelGoalsHeadlineWrapper}>
            <div className={UserAssignmentPreviewModalStyle.modalDelGoalsHeadline}>
              Delivery goals
            </div>
          </div>
          <div className={UserAssignmentPreviewModalStyle.modalDelGoalsContainer}>
            <div className={UserAssignmentPreviewModalStyle.modalDelGoals}>
              <div className={UserAssignmentPreviewModalStyle.modalDelGoalsSubheadline}>First</div>
              {userAssignmentInfo.deliveryGoal1}
            </div>
            {userAssignmentInfo.deliveryGoal2 === '' ? null : (
              <div className={UserAssignmentPreviewModalStyle.modalDelGoals}>
                <div className={UserAssignmentPreviewModalStyle.modalDelGoalsSubheadline}>
                  Second
                </div>
                {userAssignmentInfo.deliveryGoal2}
              </div>
            )}
            {userAssignmentInfo.deliveryGoal3 === '' ? null : (
              <div className={UserAssignmentPreviewModalStyle.modalDelGoals}>
                <div className={UserAssignmentPreviewModalStyle.modalDelGoalsSubheadline}>
                  Third
                </div>
                {userAssignmentInfo.deliveryGoal3}
              </div>
            )}
          </div>
        </div>
      </Modal.Body>
      <Modal.Footer className={UserAssignmentPreviewModalStyle.modalFooterWrapper}>
        <div>
          <button
            className={`${buttonStyle.button} ${UserAssignmentPreviewModalStyle.modalFooterApproveButton}`}
            onClick={handleApplication}
            disabled={!availableToApply}
          >
            Apply
          </button>
        </div>
      </Modal.Footer>
    </Modal>
  );
}

UserAssignmentsPreviewModal.propTypes = {
  userAssignmentInfo: PropTypes.object.isRequired,
  userAssignmentQualifications: PropTypes.array.isRequired,
  showModal: PropTypes.bool.isRequired,
  handleCloseModal: PropTypes.func.isRequired,
  availableToApply: PropTypes.bool.isRequired,
  userId: PropTypes.number.isRequired,
};

export default UserAssignmentsPreviewModal;