0

I am trying to render a few properties to the element on the basis of a condition in react as follows:

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')

But getting the following errors depeding on the condition,

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 Constructor.

OR

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 Constructor.

The following piece of code works though, 

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')

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

Vipin Verma
  • 5,330
  • 11
  • 50
  • 92
  • Coffeescript doesn't have such a conditional key functionality. You could follow the advice at the bottom here https://github.com/jashkenas/coffeescript/issues/3928 but just think what works in normal javascript (which doesn't have conditional keys in object literals) – azium Jun 17 '16 at 13:31
  • Did you mean to say that there is currently no solution to this? – Vipin Verma Jun 17 '16 at 13:40
  • There is, of course a solution. You can define the props object, then conditionally add keys `props = {}; if (cond) props.key = value`. With regards to multiple components per condition, you can return an array of components instead of just one. – azium Jun 17 '16 at 14:03
  • but i am rendering only one component (span), just that the properties/data-attributes are different on the basis of condition – Vipin Verma Jun 17 '16 at 14:34
  • So do what I just said above? Which part are you still confused about? or for that matter, the second block of code you posted.. what's wrong with that? you said it works... – azium Jun 17 '16 at 14:40
  • second one works without any flaw. but ideally I would want the first one to work. So my question is, is it possible to make the first one work somehow? – Vipin Verma Jun 17 '16 at 14:51
  • yes by creating the props object first then conditionally adding keys. then you pass that to your span function. – azium Jun 17 '16 at 16:56
  • but i have to use state and not props to determine if the keys should be rendered or not – Vipin Verma Jun 18 '16 at 07:17

0 Answers0