reactjs - How do I pass Page title to the menu (like breadcrumbs)

Question

I am trying to develop a mobile view for an application. I have menus on my footer component, I have header component, pages and subpages (component).

  import React from 'react' 
    import {Link} from Gatsby
    export default Nav =() => {
         const menu = [
    {
       url: '/',
       title: 'Home', 
     },
     {
      url: '/about'
      title: 'About'
     },
      {
      url: '/contact'
      title: 'Contact'
     },
      
    ]
    return (
           <ul>
{menu.map(item => {
     <li>
<Link to="{item.title}">{item.title}</Link>
</li>
})}
</ul>
)
    }

For my header I have a place a component to display the content but I want to pass the clicked menu title on the header menu (another component entirely). I want to know how to go about it.

Answer 1

You can use state props of <Link />

Here is an example:

const PhotoFeedItem = ({ id }) => (
  <div>
    {/* (skip the feed item markup for brevity) */}
    <Link
      to={`/photos/${id}`}
      state={{ fromFeed: true }}
    >
      View Photo
    </Link>
  </div>
)

const Photo = ({ location, photoId }) => {
  if (location.state.fromFeed) {
    return <FromFeedPhoto id={photoId} />
  } else {
    return <Photo id={photoId} />
  }
}

Or you can do it using the navigate function.