How to pass button text content to another page in React?

I'm not really into React but I have to do a simply appointment page. I've built a simple calendar (screenshot). Every "hour" button links to another page where I want to show the chosen time.

<div className="dzisiaj dzien" >
  Dziś <br></br>
  <button className="godzina niedostepny"><s>14:15</s></button>
  <Link to="/Page3">
    <button className="godzina">15:00</button>
  </Link>
  <button className="godzina">16:00</button>
  <button className="godzina niedostepny"><s>16:45</s></button>
</div>

I've just used a Link component to redirect to a next page, but I have no idea how to display the specific chosen hour. I'd really appreciate some code example.

edit: I feel like I've messed something up somewhere since it still doesn't work. Console says:

"Uncaught TypeError: Cannot read properties of undefined (reading 'state')"

for line 7 and 12 of page3

Solution 1:

The Link component attribute to can also be an object with additional parameters. See the full documentation here: https://v5.reactrouter.com/web/api/Link
This allows you to do the following:

<Link to={{ pathname: "/page3", state: { time: "15:00" } }} >{ /** ... */ }</Link>

On the target component, you can access the state via props.location.state as follows:

const Page3 = (props) => {
  const { time } = props.location.state;
  return (
    <div id="page3">
      <Header/>
      <div id="test">
        <p>{ time }</p>
      </div>
    </div>  
  )
}