Babel expects “,” where there should be a “.”?

Question

So, the following implementation works just fine to read JSON data and turn it into rendered components - until I try to add the children. Then, it spits out an error.

function:

const catalogRenderer = (config) => {
  if (typeof KeysToComponentMap[config.component] !== "undefined") {
    return React.createElement(
      KeysToComponentMap[config.component],
      {
        key: config.key,
        title: config.title
      },
      {
        config.children && config.children.map(c => catalogRenderer(c))
      }
    );
  }
}

error:

app.js:134 Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js)
"...Scripts/CatalogRenderer.js: Unexpected token, expected "," (25:14)"

console:

 },
  24 |       {
> 25 |         config.children && config.children.map(c => catalogRenderer(c))
     |               ^
  26 |       }
  27 |     );
  28 |   }

I'm using react as part of an electron application, it's a long story about all the moving parts, but everything else so far has worked just fine. In the editor, if I move to the preceding { from that mysteriously disliked. on line 25, it's highlighting the period as if this should somehow close the bracket.

Is there something I'm not understanding about the syntax here? The same thing happens if I attempt to just map and render the children like so:

      {
        config.children.map(c => catalogRenderer(c))
      }

I've tried enclosing the whole statement in brackets, curly braces, parentheses--no matter what I do, babel seems to expect a comma, but giving it a comma obviously doesn't help. Any idea what I'm doing wrong?

eta: This is the JSON object I'm attempting to render from:

    const catConfig = {
      catalog: [
        {
          component: 'pen',
          title: `B.C. Palmer`,
          key: `B.C.PalmerPen`,
          children: `A child string`
        },
        {
          component: 'content',
          key: `B.C.PalmerWorldList`,
          children: [
            {
              component: 'world',
              title: `Rismere`,
              key: `RismereWorld`
            },
            {
              component: 'content',
              key: `RismereSeries`,
              children: [
                {
                  component: 'series',
                  title: `The Eidolon War`,
                  key: `TheEidolonWarSeries`
                },
                {
                  component: 'content',
                  key: `TheEidolonWarBooks`,
                  children: [
                    {
                      component: 'book',
                      title: `Magic's Heart`,
                      key: `MagicsHeartBook`
                    },
                    {
                      component: 'book',
                      title: `Magic's Fury`,
                      key: `MagicsFuryBook`
                    },
                    {
                      component: 'book',
                      title: `Magic's Grace`,
                      key: `MagicsGraceBook`
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          component: 'pen',
          title: `Simon Strange`,
          key: `SimonStrangePen`
        }
      ]
    }

This JSON will be generated via a database call, and written each time the database is updated, and update the state of the 'catalog' component.

So, for example, the second object in the catalog array above is a container which, when the first 'pen' component is clicked, becomes visible and shows a list of 'world' components (in this case, just the one.) However, the function only successfully renders any 'parent' components--if I take out the curly braces at lines 24 and 26, it simply skips them but doesn't error.

The components are composed of button elements and a div (content). The buttons will likely become Link element when I get this working, but the original version was written in vanilla javascript, I haven't implemented routing with the catalog yet. So, the pen component for example:

import React from 'react'

export default penButton => {
  return(
    <button className="catalogItem pen">
      <img src="src/icons/catPenName.png" className="catalogIcon"/>
      <p className="contentLabel">{penButton.title}</p>
    </button>
  )
}

Is a top level component, and gets rendered just fine. It's next sibling (and the next sibling of any button except a book) is content:

import React from 'react'

export default contentList => {
  return(
    <div className="contentList">
    </div>
  )
}

contentList is just a div with the contentList class, which handles visibility and animation. Should I have a place for the "children" key in JSON to populate the children of content?

Answer 1

When you want to render multipile children elemen'ts into your react component, you need to pass each child as a seperate parameter.

See this answer as an example: how to render multiple children without JSX

so your solution should be to use spread syntax .

here is an example:

const catalogRenderer = (config) => {
  if (typeof KeysToComponentMap[config.component] !== "undefined") {
    let childs = [];
    if (config.children) {
      childs = config.children.map(c => catalogRenderer(c));
    } 
    return React.createElement(
      KeysToComponentMap[config.component],
      {
        key: config.key,
        title: config.title
      },
      ...childs
    );
  }
}

Answer 2

Well, that was simple and a little silly. I updated the content component to:

import React from 'react'

export default contentList => {
  return(
    <div className="contentList">
      {contentList.children} <---- added
    </div>
  )
}

Content didn't have a place to put children. Obviously.