Fragment usage

[chronoDave]

I'm trying to render a list as shown in the example but it assumes rendering a single element.

const list = [
  { key: 'a', value: '1' },
  { key: 'b', value: '2' }
];

const Example = () => new forgo.Component({
  render() {
    return list.map(item => [
      <p>{item.key}</p>,
      <p>{item.value}</p>
    ])
  }
});

In React, you could wrap listed items like this into a fragment which you can attach a key to.

return list.map(item => [
  <Fragment key={item.key}>
    {[
      <p>{item.key}</p>,
      <p>{item.value}</p>
    ]}
  </Fragment>
])

How would you do this in forgo?

[chronoDave]

Example React usage: https://reactjs.org/docs/fragments.html#keyed-fragments

[spiffytech]

Can you clarify - are you looking for keyed fragments specifically, or fragment support generally?

Forgo supports non-keyed fragments with the <>...</> syntax, like this:

return list.map(item => 
  <>
    <p>{item.key}</p>
    <p>{item.value}</p>
  </>
)

I see that's not in the docs - I'll fix that.

Forgo presently doesn't support keyed fragments, though I can see how they'd make sense. I can see what it'd take to implement them, though off-hand I'm not sure what that would look like under the hood.

[chronoDave]

Both, actually! I saw that fragments were supported but I wasn't able to find the syntax in the docs, thank you for that. I also needed the keyed fragments but for now I'm using a wrapper element with a key.