1

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

Ed Lucas
  • 5,955
  • 4
  • 30
  • 42
rbrtj
  • 51
  • 5
  • Passing parameters on a React Router `` has been answered here: https://stackoverflow.com/questions/30115324/pass-props-in-link-react-router – Ed Lucas Jan 16 '22 at 19:34
  • Does this answer your question? [Pass props in Link react-router](https://stackoverflow.com/questions/30115324/pass-props-in-link-react-router) – Ed Lucas Jan 16 '22 at 19:34
  • Well, it looks like a solution but when i try to pass params by Link attribute then it just redirects me to a blank page without content, just a background image. And the path looks corrects. – rbrtj Jan 26 '22 at 20:49

1 Answers1

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>  
  )
}
Lukas Schneider
  • 106
  • 4
  • Ok, that's something but i still can't figure out how to render it on my compontent page. I've really tried to find solution in the internet but can't get a right one. I'm not even sure which library should i import (as i said i completly dont know react, im just following yt videos). I'll put my component code in a separate answer. – rbrtj Jan 16 '22 at 17:39
  • I updated my answer with your component code. If it solves your issue, please accept it as answer to your question. And you can edit your initial question, no need to create a separate answer. – Lukas Schneider Jan 16 '22 at 18:17