Gatsby - Puting Components Inside Components

Hi there,

Is there a good way to put components inside components?

I want to have something like this:
<TemplateA> <h1>Main content</h1> </TemplateA>

But templateA would be defined as something like this:
<Primarycontainer> <Primarynavigation /> <Primarycontent> <Leftcontentcolumn> {children} </Leftcontentcolumn> <Rightsidebar /> </Primarycontent> <Footer /> </Primarycontainer>

I can’t import various components into another component in the same way as I’ve imported them into a pages file. Meaning I can’t have a components of components file, or a nested components file.

Any suggestions?

Thank you

Hi,
I’m not sure I understand what do you mean by not being able to have “components of components file, or a nested components file.”.
You can (inside the file that contains your Template component) import other components if needed, you could then render them as child components, something like this:

...
import Primarycontainer from './Primarycontainer';
import Primarynavigation from './Primarynavigation';
import Primarycontent from './Primarycontent';
...

class TemplateA extends React.Component {
...
  render () {
    return (
     <div id='templateA'>
       <Primarycontainer />
       <Primarynavigation />
       <Primarycontent /> 
    </div>
    );
   }
}

I hope this answers your question,
cheers,

I want to make a component file that imports other components.

For example, it would look like this inside /components/templatea.js file:

import React from 'react'
import Sidebar from '/components/sidebar'
import Articlecolumn from '/components/articlecolumn'

export default ({children}) => (
  <Articlecolumn>
    {children}
  </Articlecolumn>
  <Sidebar />
)

And in another file, I could do something like:

import Templatea from '/components/templatea'

<Templatea>
  <p>put a bunch of html for an article here</p>
</Templatea>