How to return multiple components on the same level in render()?

[binarykitchen]

I often have this problem:

  render: ->
    <Row>
      <Col xs = 12 >
        <Input
          {...@props}
          ...
        />
      </Col>
    </Row>
    <Row>
      <Col xs = 12 >
        <Input
          {...@props}
          ...
        />
      </Col>
    </Row>

which will only return the last element due to the CoffeeScript nature.

To fix this, I have to wrap everything inside a <div> element but then, this is breaking the Bootstrap Grid and other CSS selectors.

Is there no other way around?

[jsdf]

This isn't a problem with Coffeescript or CJSX, this is something you fundamentally can't do with JSX. You must have a single root element in any JSX expression: https://facebook.github.io/react/tips/maximum-number-of-jsx-root-nodes.html

I'm assuming from your example code you're using react-bootstrap. The example they give uses a <Grid> element to wrap the list of <Row> elements:

const navInstance = (
  <Grid>
    <Row className='show-grid'>
      <Col xs={12} md={8}><code>&lt;{'Col xs={12} md={8}'} /&gt;</code></Col>
      <Col xs={6} md={4}><code>&lt;{'Col xs={6} md={4}'} /&gt;</code></Col>
    </Row>

    <Row className='show-grid'>
      <Col xs={6} md={4}><code>&lt;{'Col xs={6} md={4}'} /&gt;</code></Col>
      <Col xs={6} md={4}><code>&lt;{'Col xs={6} md={4}'} /&gt;</code></Col>
      <Col xs={6} md={4}><code>&lt;{'Col xs={6} md={4}'} /&gt;</code></Col>
    </Row>

    <Row className='show-grid'>
      <Col xs={6} xsOffset={6}><code>&lt;{'Col xs={6} xsOffset={6}'} /&gt;</code></Col>
    </Row>

    <Row className='show-grid'>
      <Col md={6} mdPush={6}><code>&lt;{'Col md={6} mdPush={6}'} /&gt;</code></Col>
      <Col md={6} mdPull={6}><code>&lt;{'Col md={6} mdPull={6}'} /&gt;</code></Col>
    </Row>
  </Grid>
);

React.render(navInstance, mountNode);

[binarykitchen]

Oh, right, thanks for the reminder and for the links, I forgot about that.

Using grid? I am not sure because I am going to insert that React element into another Grid somewhere else (parent element already has a grid). Or are nested Grids allowed?