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

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 /> 

I hope this answers your question,

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}) => (
  <Sidebar />

And in another file, I could do something like:

import Templatea from '/components/templatea'

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