Essentially, I am using document.querySelectorAll() to retrieve an array of div elements. In my function, handleClick(), each time the button is clicked, I want to hide the table associated with that specific button.
This is the current situation: https://i.sstatic.net/gJLM6.png
When I click one of the dropdown buttons, this is what occurs: https://i.sstatic.net/bVfAL.png
CURRENT BEHAVIOR: All tables are hidden
EXPECTED BEHAVIOR: Only the table related to the clicked button should be hidden
Below is a snippet of the code from the file:
const handleTitleClick = (e) => {
const row = document.querySelectorAll(
"div[class*='MuiDataGrid-root']"
) as NodeList;
const rowArr = Array.from(row);
rowArr.map((r, i) => {
const somerow = r;
somerow.style.display = 'none';
return row;
});
console.log(e);
console.log(rowArr);
console.log(row);
};<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>