How do I pass data to child components

See more:

Javascript

gatsby

Hello, I am a Gatsby newb. would like to make my Sidebar component more reusable by passing content from my home page (parent) component to the Sidebar UI (child) component.

I know I can use props to pass the data using the Sidebar component but I am struggling with implementing this approach with passing in and <ul> elements and would appreciate it 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?

Is there a way to allow the Sidebar component to inherit the unorderedList property content 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.

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 unorderedList={
            <ul>
              <Link to="#">Blog</Link>
            </ul>
            <ul>
              <Link to="#">home</Link>
            </ul>
            <h3>Social</h3>
            <ul className="icons alt">
              <li><a href="#" class="icon alt fa-twitter">Twitter</a></li>
              <li><a href="#" class="icon alt fa-facebook">Facebook</a></li>
              <li><a href="#" class="icon alt fa-instagram">Instagram</a></li>
              <li><a href="#" class="icon alt fa-github">GitHub</a></li>
            </ul>
          }</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">Twitter</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>
              <Link to="#">Blog</Link>
            </ul>
            <ul>
              <Link to="#">home</Link>
            </ul>
            <h3>Social</h3>
            <ul className="icons alt">
              <li><a href="#" class="icon alt fa-twitter">Twitter</a></li>
              <li><a href="#" class="icon alt fa-facebook">Facebook</a></li>
              <li><a href="#" class="icon alt fa-instagram">Instagram</a></li>
              <li><a href="#" class="icon alt fa-github">GitHub</a></li>
            </ul> */}
          </Menulinks>
    </>
  );
}

What I have tried:

I tried using this tutorial[^] but it didn’t help sadly. If only there was a tutorial that showed you how to pass list items from a parent to a child component.