ApplicationItem.js

import React, { Component } from "react";
import Button from "react-bootstrap/esm/Button";
import Card from 'react-bootstrap/Card';
import Table from "react-bootstrap/esm/Table";

import { connect } from "react-redux";

const mapStateToProps = state => {
    return {
        isAdmin: state.AuthenticationReducer.isAdmin
    };
}

class ApplicationItem extends Component {
    render() {
        let application = this.props.application
        let deleteButtonID = "DegreeCourseApplicationItemDeleteButton" + application.id
        let itemID = "DegreeCourseApplicationItem" + application.id
        let dialogData = {
            dialogID: "DeleteDialogDegreeCourseApplication" + application.id,
            name: application.degreeCourseName,
            applicationID: application.id,
            user: application.applicantUserID,
            universityName: application.universityName
        }

        return (
            <div>
                <div>
                    <Card style={{ width: "22rem", background: '#ebebeb', margin: '0.5rem' }} id={itemID}>
                        <Card.Header><b>{application.applicantUserID}: {application.universityShortName} {application.targetPeriodShortName} {application.targetPeriodYear}</b></Card.Header>
                        <Table responsive="sm">
                            <tbody>
                                <tr id="ApplicantUserID">
                                    <td><b>User:</b></td>
                                    <td style={{ textAlign: 'left' }}>{application.applicantUserID}</td>
                                </tr>
                                <tr id="DegreeCourseName">
                                    <td><b>Studiengang:</b></td>
                                    <td style={{ textAlign: 'left' }}>{application.degreeCourseName}</td>
                                </tr>
                                <tr id="TargetPeriodYear">
                                    <td><b>Bewerbungsjahr:</b></td>
                                    <td style={{ textAlign: 'left' }}>{application.targetPeriodYear}</td>
                                </tr>
                                <tr id="TargetPeriodShortName">
                                    <td><b>Bewerbungssemester:</b></td>
                                    <td style={{ textAlign: 'left' }}>{application.targetPeriodShortName}</td>
                                </tr>
                                <tr id="UniversityShortName">
                                    <td><b>Universität:</b></td>
                                    <td style={{ textAlign: 'left' }}>{application.universityShortName}</td>
                                </tr>
                                <tr id="DepartmentShortName">
                                    <td><b>Fachbereich:</b></td>
                                    <td style={{ textAlign: 'left' }}>{application.departmentShortName}</td>
                                </tr>
                            </tbody>
                        </Table>
                        <Card.Footer style={{ display: 'flex', justifyContent: 'space-evenly' }}>
                            <Button variant="primary" type="submit" onClick={(e) => this.props.handleShowDeleteModal(e, dialogData)} id={deleteButtonID} style={{ background: '#ffc800', color: 'black', border: 'none' }}>
                                Delete
                            </Button>
                        </Card.Footer>
                    </Card>
                </div>
            </div>
        )
    }
}

const ConnectedApplicationItem = connect(mapStateToProps)(ApplicationItem)
export default ConnectedApplicationItem