PopUpDelete.js

import React, { Component } from 'react';
import Images from '../assets/Images';
import { Typography } from '@material-ui/core';

export default class PopUpDelete extends Component {
    render() {
        return (
            <div className="test app-popup-show">
                <div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
                    <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 20 }}>
                        <img src={Images.failed} />
                    </div>
                    <div style={{ display: 'grid', justifyContent: 'center', marginTop: 20, paddingBottom: 20 }}>
                        <span style={{ textAlign: 'center', fontSize: 14, fontWeight: 'bold', fontFamily: 'Nunito Sans, sans-serif' }}>
                            {this.props.intent === 'parameter' ? 
                            `Delete [${this.props.rowData[2]}, ${this.props.rowData[3]}, ${this.props.rowData[4]}, ${this.props.rowData[7] === "" ? this.props.rowData[8] + ' + ' +  this.props.rowData[9] : this.props.rowData[7]}]?`
                            :
                            `Delete ${this.props.name}?`
                            }
                        </span>
                    </div>
                    <div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
                        <div className="column-1" style={{ alignSelf: 'center' }}>
                            <button
                                type="button"
                                onClick={() => this.props.onClickClose()}
                            >
                                <div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
                                    <span style={{ color: '#354960', fontSize: 11 }}>Cancel</span>
                                </div>
                            </button>
                        </div>
                        <div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
                            <button
                                type="button"
                                onClick={() => this.props.onClickDelete(this.props.rowData)}
                            >
                                <div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
                                    <span style={{ color: '#fff', fontSize: 11 }}>Delete</span>
                                </div>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}