title: React Objects are not valid as a React child, wrap the object using createFragment(object) from the React add-ons
body: <p>I am trying to render a few properties to the element on the basis of a condition in react as follows:</p>
  
  <pre><code>dom.span
    className: "btn pull-right btn-primary#{if @state.enableCartButton then '' else ' disabled'}"
    if @state.enableCartButton
      onClick: @submitCustomizeForm
    else
      'data-toggle': "tooltip"
      'data-placement': "left"
      title: "Select a measurement profile to continue"
    translate('store.products.customize.save', 'ADD TO CART')
  </code></pre>
  
  <p>But getting the following errors depeding on the condition,</p>
  
  <blockquote>
    <p>Uncaught Invariant Violation: Objects are not valid as a React child
    (found: object with keys {onClick}). If you meant to render a
    collection of children, use an array instead or wrap the object using
    createFragment(object) from the React add-ons. Check the render method
    of <code>Constructor</code>.</p>
  </blockquote>
  
  <p>OR</p>
  
  <blockquote>
    <p>Uncaught Invariant Violation: Objects are not valid as a React child
    (found: object with keys {data-toggle, data-placement, title}). If you
    meant to render a collection of children, use an array instead or wrap
    the object using createFragment(object) from the React add-ons. Check
    the render method of <code>Constructor</code>.</p>
  </blockquote>
  
  <p>The following piece of code works though,   </p>
  
  <pre><code>if @state.enableCartButton
    dom.span
      className: "btn pull-right btn-primary"
      onClick: @submitCustomizeForm
      translate('store.products.customize.save', 'ADD TO CART')
  else
    dom.span
      className: "btn pull-right btn-primary disabled"
      'data-toggle': "tooltip"
      'data-placement': "top"
      title: "Select a measurement profile to continue."
      translate('store.products.customize.save', 'ADD TO CART')  
  </code></pre>
  
  <p>Moreover, I am not sure why I am not able to render multiple elements inside an if/for in react. Only one element is allowed, if I render more than one than only the last one gets rendered in the HTML</p>