Gatsby: {children} function and menu

[giannis-dallas]

Hello,

This is a more general question. I am trying to figure out this code from the tutorial.

import React from "react";
import Link from "gatsby-link";

const ListLink = props =>
  <li style={{ display: `inline-block`, marginRight: `1rem` }}>
    <Link to={props.to}>
      {props.children}
    </Link>
  </li>

export default ({ children }) =>
  <div style={{ margin: `0 auto`, maxWidth: 650, padding: `1.25rem 1rem` }}>
    <header style={{ marginBottom: `1.5rem` }}>
      <Link to="/" style={{ textShadow: `none`, backgroundImage: `none` }}>
        <h3 style={{ display: `inline` }}>MySweetSite</h3>
      </Link>
      <ul style={{ listStyle: `none`, float: `right` }}>
        <ListLink to="/">Home</ListLink>
        <ListLink to="/about/">About</ListLink>
        <ListLink to="/contact/">Contact</ListLink>
      </ul>
    </header>
    {children()}
  </div>

Is {children()} a native function to gatsby?
How is the {props.children} passed to ListLink function?
Is there a specific tutorial to read about it?

Thank you and sorry if I am abusing the forum for a general question

Greetings,
Giannis

[pieh]

Usually props.children is general react way (not gatsby specific) of accessing content between opening and closing tags:

<ListLink to="/">Home</ListLink>

props.children here will be string 'Home' - if you nest other components there, then props.children will be those components. You can check more for example here - https://learn.co/lessons/react-this-props-children

props.children() function that is passed to layout is gatsby specific construct on the other hand (and this is only used in layouts). That is used to render page component (with some wrappers around it to make gatsby navigation work). Normally children isn't a function, so I can see why this might be confusing (maybe worth renaming it something else to avoid confusion), but unfortunately this have to be function to make it work for gatsby.

[giannis-dallas]

Thanks for clarifying the confusion @pieh

[fk]

@pieh @KyleAMathews I'm wondering if https://www.gatsbyjs.org/docs/building-with-components/#layout-components would be a good spot to document this?

I did a quick search for props.children on gatsbyjs.org and (weirdly enough) only found https://www.gatsbyjs.org/docs/migrating-from-v0-to-v1/#_templatejs-is-now-srclayoutsindexjs. Maybe mentioning the PR comment referenced there along @pieh's explanation from this issue already helps?

In regards to only finding the v0 to v1 migration article when searching for props.children I'm wondering if highlighted code blocks are indexed by algolia at all? /cc @m-allanson

[m-allanson]

@fk I think only <li> and <p> tags are indexed. We could update the config to include <code> blocks but it might make the results quite noisy? Looking through the configs at https://github.com/algolia/docsearch-configs it seems like most sites don't index <code> blocks.

[fk]

We could update the config to include <code> blocks but it might make the results quite noisy

Good point :man_facepalming: 🙁
Thank you for looking into how other people handle things!

[heyalbert]

To be honest, I don't understand {children()} in layout.js either. What does this exactly do? How can I manipulate it? What I have to keep in mind? Can I use it in other files, too?