Mithril: Wrapping children in an array when using jsx

Question

I'm so close to getting jsx to work with mithril.

However, mithril wants you to wrap child elements in an array. It doesn't show a jsx example more than one element deep in the mithril documentation.

So a mithril component such as

'use strict'

import m from 'mithril';

export default m.Component = {
    view () {
        return (
            <div className={'xxxx'}>
                <div className={'xxxx'}>
                    <div className={'xxxxx'}>
                        <h2>xxxxx</h2>
                        <p>xxxxxx</p>
                        <p>xxxxxx</p>
                    </div>
                </div>
            </div>
        )
    }
};

yields the error message

Mithril v1.0.0 only supports 3 arguments, wrap children in an array.

and the component fails to render. It worked when I just had the header and no paragraph elements. How can I wrap the three elements in an array in a way jsx will parse?

Yannick K · Answer 1 · 2019-06-05T21:40:03.817

1

You can wrap divs and such in an array if you wrap them in curly braces, like so:

...
  return (
     <div className={'xxxx'}>
        <div className={'xxxx'}>
          <div className={'xxxxx'}>
          { [
            <h2>xxxxx</h2>,
            <p>xxxxxx</p>,
            <p>xxxxxx</p>
          ] }
          </div>
        </div>
     </div>,
  )
...

edited Jun 05 '19 at 21:40

answered Jun 05 '19 at 21:04

Yannick K

4,887
3
11
21

Thank you, this was helpful. The array must be on the middle three elements. The comma at the end of your list led me to the solution. – K Lovell Jun 05 '19 at 21:31
Oh I see, apologies I missed that. – Yannick K Jun 05 '19 at 21:35

score 0 · Answer 2 · answered Jun 05 '19 at 21:29

What I was missing was the commas between list elements.

        return (
            <div className={'xxxx'}>
                <div className={'xxxxx'}>
                    <div className={'xxxx'}>
                        {[
                            <h2>xxx</h2>, // Comma here
                            <p>xxxx</p>, // Comma here
                            <p>xxxx</p>
                        ]}
                    </div>
                </div>
            </div>
        )

Mithril: Wrapping children in an array when using jsx

2 Answers2