How do I pass <ul> elements in Gatsby from one component to another

[LayersOfAbstraction]

Hi I would like to make my Sidebar component more reusable by passing content from my home page component to the Sidebar UI component.

I know I can use props to pass the data using the Sidebar component but I am struggling with implementing that and would appreciate if someone has been able to do that in the past and can show me how to read the data in the Sidebar.js file?

The data I am trying to pass into the sidebar are list elements from an unordered list that link to other pages down the track and social media. The JSX div id is nav and the ul className is links.

Is there a way to allow the sidebar component to inherit those props from my home page component, please?

If it helps I got the code to my forked repo. You want the gatsby-integration-v2 branch which I should have already put inside this repo.

I tried using this tutorial but it didn’t help.

FYI when you compile the site, the sidebar component can be seen by the hamburger icon on the top right of the screen.

Below is a condensed version of my code if it helps.

index.js

import { Link } from "gatsby"
import React, { useState} from "react"
import { Sidebar } from "../components/sidebar"

const Home = () => {    
  return (
    <>
//Omitted code.
      {/* Wrapper */}
      <div id="wrapper" className="fade-in">     
          <Sidebar></Sidebar>
        {/* Nav */}
          <nav id="nav">
            <ul className="links">
              <li className="active">
                <a href="index.html">This is Massively</a>
              </li>
            </ul>
            <ul className="icons">
              <li>
                <a href="#" className="icon fa-linkedin">
                  <span className="label">Instagram</span>
                </a>
              </li>
              <li>
                <a href="#" className="icon fa-github">
                  <span className="label">GitHub</span>
                </a>
              </li>
              <li><a href="#" class="icon alt fa-twitter"><span class="label">Twitter</span></a></li>
            </ul>
          </nav>
      </div>
    </>
  );
}

export default Home

sidebar.js

export const Sidebar =  () => {
  const [nav, showNav] = useState(false);
return(
<>
<Global />
          <MenuIcon nav={nav} onClick={() => showNav(!nav)}>
            <div/>
            <div/>
            <div/>
          </MenuIcon>
          <Menulinks nav={nav}>
            <ul>
            </ul>
            <h3>Social</h3>
            <ul className="icons alt">
              <li><a href="#" class="icon alt fa-twitter"><span class="label">Twitter</span></a></li>
              <li><a href="#" class="icon alt fa-facebook"><span class="label">Facebook</span></a></li>
              <li><a href="#" class="icon alt fa-instagram"><span class="label">Instagram</span></a></li>
              <li><a href="#" class="icon alt fa-github"><span class="label">GitHub</span></a></li>
            </ul>
          </Menulinks>
    </>
  );
}