What is the simplest possible way to get a div button to hide its parent div on click in React.js

I have a task that is simple (one line) in plain HTML/CSS/JS, but I can't find a simple and working method in React.

I have a parent div, and it has two children. The second child is the meaningful content. The first child is a "hide" button, that, when clicked, hides the parent div (including, of course, both child divs).

function SecondPage({ thisData }) {

    function hidePage(thisID) {
        let thisElement = document.getElementById(thisID)
        thisElement.style.display='none';
    }

    return ( <>
        <div className="page" id="InfoPage1">
            <div className="hidePageButton" onClick={hidePage("InfoPage1")}>
                ✖
            </div>
            <div className="pageContent"> 
                Some text and stuff
            </div>
        </div>

        <div className="page" id="InfoPage2">
            <div className="hidePageButton" onClick={hidePage("InfoPage2")}>
                ✖
            </div>
            <div className="pageContent"> 
                Some text and stuff
            </div>
        </div>
    </> );
}
export default SecondPage;

In fact, there is an even easier/simpler way using onClick={hidePage(this)} and function hidePage(el) {el.parentNode.style.display='none' }

But these methods don't work in React. I've seen some proposed solutions for React that supposedly do what I want, but they are complicated. They propose defining classes with embedded functions and all kinds of seemingly extra baggage to do this simple task.

I've also read hints that being able to get elements by IDs and getting parents is not in line with React's philosophy. But I don't care about that. I don't need the best way according to React gospel, or the most modular, or the safest, or anything like that.

What is the simplest possible way to get a div button to hide its parent div (or make other style changes) on click in React (jsx).

I've edited the question after receiving a few great answers because they couldn't obviously handle something closer to my real case: multiple instances per HTML block. One of the points of passing the elementID to the hide function is to tell the hide function which div element to hide (in my case, its immediate parent). I don't see how to support multiple instances per page with the current proposed solutions.

Solution

You need a ref of parent div
An onClick handler to Set parent div display to none

import { useCallback, useRef } from 'react';
import './App.css';

function App() {
  const pageRef = useRef(null);
  const hidePage = useCallback(() => {
    pageRef.current.style.display = 'none';
  }, [pageRef.current]);

  return (
    <div className="page" id="InfoPage" ref={pageRef}>
      <div className="hidePageButton" onClick={hidePage}>
        ✖
      </div>
      <div className="pageContent">Some text and stuff</div>
    </div>
  );
}

export default App;

Working sample: https://stackblitz.com/edit/vitejs-vite-amkkzf?file=src%2FApp.jsx