gem react-rails, what is wrong with my coffee style?

Question

It's my first time when I try to work with react. And I do not understand what's going on.. :)

A have:

Dislike = React.createClass
  render: ->
    if @props.auth == true
      React.DOM.a
        className: ''
        React.DOM.i
          className: 'fa fa-thumbs-o-down'
          "Dislike (#{@props.num_dislike})"
    else
      React.DOM.i
        className: 'fa fa-thumbs-o-down'
        "Dislike (#{@props.num_dislike})"

Like = React.createClass
  render: ->
    if @props.auth == true
      React.DOM.a
        className: ''
        React.DOM.i className: 'fa fa-thumbs-o-up',
          "Like (#{@props.num_like})"
    else
      React.DOM.i
        className: 'fa fa-thumbs-o-up'
        "Like (#{@props.num_like})"

@LikeBox = React.createClass
  render: ->
    return (
      React.createElement(Dislike, @props)
      React.createElement(Like, @props)
    )

In my view a have:

= react_component('LikeBox', {auth: current_user.present?,
                                  num_like: 23,
                                  num_dislike: 32,
                                  link_like: like_suggestion_path(suggestion),
                                  link_dislike: dislike_suggestion_path(suggestion)})

And when I open page a have:

<div data-react-class="LikeBox" data-react-props="{....}">
  <a class="" data-reactid=".0">
    <i class="fa fa-thumbs-o-up" data-reactid=".0.0">Like (23)</i>
  </a>
</div>

But my expectations is:

<div data-react-class="LikeBox" data-react-props="{....}">
  <a class="" data-reactid=".0">
    <i class="fa fa-thumbs-o-up" data-reactid=".0.0">Like (23)</i>
  </a>
  <a class="" data-reactid=".0">
    <i class="fa fa-thumbs-o-down" data-reactid=".0.0">Dislike (73)</i>
  </a>
</div>

What is wrong with this block ?

@LikeBox = React.createClass
  render: ->
    return (
      React.createElement(Dislike, @props)
      React.createElement(Like, @props)
    )

What is wrong with the block: both elements are created, but only the second expression is returned. That is what gets rendered. — TimK, Dec 12 '15 at 19:44

score 1 · Answer 1 · answered Jan 18 '16 at 09:32

We can simply return an array of children elements of LikeBox

@LikeBox = React.createClass
  render: ->
    React.DOM.div
    className: 'like-box'
    [
      React.createElement(Dislike, @props)   
      React.createElement(Like, @props)
    ]

score 0 · Answer 2 · edited Dec 12 '15 at 21:41

0

Only 'Like' element will be rendered in LikeBox. To make it work, you can do like this:

@LikeBox = React.createClass
  render: ->
   React.DOM.div
    className: 'like-box'
    React.createElement(Dislike, @props)   
    React.createElement(Like, @props)

In the above code, a div will be rendered which contains 2 children elements

edited Dec 12 '15 at 21:41

TimK

4,635
2
27
27

answered Dec 11 '15 at 02:11

Hieu Pham

6,577
2
30
50

gem react-rails, what is wrong with my coffee style?

2 Answers2