How to use separate functions to dynamically compose a React component?

Question

I have a function that walks down a simple tree and calls functions at each step to print a menu:

renderMenuFx(menu, renderFx) {
    renderFx.startMenu()
    for (const entry of menu) {
        renderFx.startEntry()
        renderFx.renderEntry(entry.path.join(""), entry.title)
        if (entry.menuEntries) {
            this.renderMenuFx(entry.menuEntries, renderFx)
        }
        renderFx.endEntry()
    }
    renderFx.endMenu()
}

and it works when logging to console:

this.renderMenuFx(tree, {
    startMenu() { console.log('<ul>') },
    endMenu() { console.log('</ul>') },
    startEntry() { console.log('<li>') },
    endEntry() { console.log('</li>') },
    renderEntry(path, title) { console.log(`<a href="${path}">${title}</a>`) },
})

But it doesn't when I try to render it in React:

<div>

{
    f.renderMenu(this.tree, {
        startMenu() { return ( <ul> ) },
        endMenu() { return ( </ul> ) },
        startEntry() { return ( <li> ) },
        endEntry() { return ( </li> ) },
        renderEntry(path, title) { return ( <a href={path}>{title}</a> ) },
    })
}

</div>

Actually, the issue is that it doesn't compile, giving:

./src/components/Menu/MenuDyn.js
Syntax error: Unexpected token (141:37)

  139 |                     f.renderMenu(this.tree, {
  140 |                         startMenu() { return ( <ul> ) },
> 141 |                         endMenu() { return ( </ul> ) },
      |                                     ^

I'm obviously doing it wrong: what's the correct way to handle such situation?

Your login test and the jsx functions do different things. I’m pretty sure JSX elements have to be closed. So it’s not possible to render just an opening/closing tag. — evolutionxbox
– evolutionxbox, Commented Mar 26, 2020 at 16:57
Consider changing the perspective. Each “HTML” tag in JSX is actually a function (React.createElement) — evolutionxbox
– evolutionxbox, Commented Mar 26, 2020 at 17:00
it's quite simple ... pass tree as prop to some node component ... node renders children subnodes passing subtrees (or end-nodes) [as props] — xadm
– xadm, Commented Mar 26, 2020 at 17:08
@xadm (simple to some, difficult for others. Consider writing an answer?) — evolutionxbox
– evolutionxbox, Commented Mar 26, 2020 at 17:33

xadm · Accepted Answer · 2020-03-26 19:32:54Z

1

Simple example to start experiments:

in some <Menu menu={someData} /> class component

render () {
  return (
    <ul>
      {this.props.menu.map((entry) => (
        <Entry key={entry.id} data={entry}></Entry>
      ))}
    </ul>
  )
}

rendered (functional) subcomponent:

const Entry = props => (
  <li>
    {props.data.title}
    {props.data.menuEntries && (
      <Menu menu={props.data.menuEntries} />
    )}
  </li>
)

answered Mar 26, 2020 at 19:32

xadm

8,4463 gold badges17 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

watery Over a year ago

Yup, thanks. I found some references about recursive React components and came up with something similar; the only thing I don't like is that in this way the tree structure is explicit in the rendering code, whereas in the function-based one it's not - or, better, it is factorized in a single place.

xadm Over a year ago

@watery usually it's full of options, conditions ... you can explore other possibilities like github.com/iannbing/react-simple-tree-menu ... simple in use but it can be less readable

Collectives™ on Stack Overflow

How to use separate functions to dynamically compose a React component?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related