How to handle z-index on React components on a table - css

Question

I'm having some issues while displaying a modal on a table. For each expense data I render a expenseItem component inside of a tbody. When clicking on this components, it opens a lateral modal and a backdrop on the remaining screen.
Backdrop has a action that whenever is clicked, it closes modal. But, when I click inside of modal, it calls close modal action of backdrop on top of it.
I've tried to set z-index of backdrop to 100 and moda to 200. It didn't work.
return (
<tr className="expense-box" onClick={() => handleOpenModal()}>
<td className="expense-info">{description}</td>
<td>-</td>
<td>-</td>
<td className="expense-info">{date}</td>
<td className="expense-info">{debit || credit}</td>
<td>
<BackDrop isShowing={isModalOpen} closeModal={handleOpenModal} />
<EditExpenseModal isShowing={isModalOpen} closeModal={handleOpenModal} expense={props.expense} />
</td>
</tr>
Backdrop component:
function BackDrop({ isShowing, closeModal }) {
return (
<div onClick={closeModal}>
{isShowing ? <div className="backDrop" /> : null}
<style jsx>
{`
.backDrop {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
z-index: 100;
top: 0;
left: 0;
}
`}
</style>
</div>
);
}
export default BackDrop;
Modal component:
import { useState, Fragment } from 'react';
import { editExpenses } from '../redux/actions/expenseActions';
import DropdownMenu from '../components/dropdownMenu';
import { connect } from 'react-redux';
import { createPortal } from 'react-dom';
const EditExpenseModal = ({ expense, isShowing, closeModal, editExpenses, savedCategories }) => {
const { id, description, date, credit, debit } = expense;
const [ expenseItem, setExpenseItem ] = useState({
date,
description,
category: '',
subcategory: '',
credit,
debit
});
function handleInputChange(e, targetName) {
const { name, value } = e.target;
(value && !targetName) || (!value && !targetName)
? setExpenseItem({ ...expenseItem, [name]: value })
: setExpenseItem({ ...expenseItem, [targetName]: e.currentTarget.innerText });
}
function onEditExpense(id, expense) {
editExpenses(id, expense);
closeModal();
}
return isShowing
? createPortal(
<Fragment>
<div>
<div className="form">
<form>
<ul>
<li className="form-inputs">
<label>Date</label>
<input
className="field-input"
type="text"
name="date"
defaultValue={date}
onChange={handleInputChange}
/>
</li>
<li className="form-inputs">
<label>Description</label>
<input
className="field-input"
type="text"
name="description"
defaultValue={description}
onChange={handleInputChange}
/>
</li>
<li className="form-inputs">
<label>Category</label>
<DropdownMenu
savedCategories={savedCategories}
handleInputChange={handleInputChange}
type={'category'}
category={expenseItem.category}
/>
</li>
<li className="form-inputs">
<label>Subcategory</label>
<DropdownMenu
savedCategories={savedCategories}
handleInputChange={handleInputChange}
type={'subcategory'}
parentCategory={expenseItem.category}
category={expenseItem.subcategory}
/>
</li>
<li className="form-inputs">
<label>Credit</label>
<input
className="field-input"
type="text"
name="credit"
defaultValue={credit}
onChange={handleInputChange}
/>
</li>
<li className="form-inputs">
<label>Debit</label>
<input
className="field-input"
type="text"
name="debit"
defaultValue={debit}
onChange={handleInputChange}
/>
</li>
</ul>
</form>
<button onClick={() => onEditExpense(id, expenseItem)}>save</button>
<button onClick={() => closeModal()}>close</button>
</div>
<style jsx>{`
.form {
position: fixed;
background: white;
box-shadow: 0px 20px 5px rgba(0, 0, 0, 0.7);
display: flex;
flex-direction: column;
height: 100%;
top: 0;
right: 0;
width: 40%;
z-index: 200;
overflow: scroll;
}
.form-inputs {
display: flex;
flex-direction: column;
list-style-type: none;
padding: 1rem 2rem;
}
.form-inputs label {
margin-left: 8px;
}
.field-input {
margin: 5px;
width: 330px;
height: 40px;
font-size: 15px;
outline: none;
}
`}</style>
</div>
</Fragment>,
document.body
)
: null;
};
const mapDispatchToProps = (dispatch) => ({
editExpenses: (id, expense) => dispatch(editExpenses(id, expense))
});
const mapStateToProps = (state) => state;
export default connect(mapStateToProps, mapDispatchToProps)(EditExpenseModal);
This problem started to happen when I've turned all structure to a table. Before I was using only <div> and it was working.