2

I am using coffeescript with react-rails gem. In the measure.js.coffee, there is no span present in the coffee code, but when the HTML is getting painted a mysterious ghost span is appearing. Below is a screenshot of code and HTML generated by it.enter image description here enter image description here

In my code, there is no span in between carousel-mImages and mtag-images. Is it because of the reactCSSTransitionGroup = React.createFactory(React.addons.CSSTransitionGroup)

Vipin Verma
  • 5,330
  • 11
  • 50
  • 92

1 Answers1

2

Yes, ReactCSSTransitionGroup is a wrapper around ReactTransitionGroup.
And from the official docs here:

By default ReactTransitionGroup renders as a span.

You can change this behavior, and render as another type of component, but this would mean you have to manually configure and render the ReactTransitionGroup.
This may save you one wrapper element in the DOM, but this depends on your component tree structure.

wintvelt
  • 13,855
  • 3
  • 38
  • 43
  • although it doesn't make sense, default wrapper should be din instead of span. Someome might want to animate the divs, and rendering div inside this ghost span breaks the html validation – Vipin Verma May 13 '16 at 10:44
  • You're right that it would break HTML validation. But any animations would still work (provided you have the right styling in your Css). No idea why they chose ``. You can change it though. – wintvelt May 13 '16 at 11:16
  • used component: 'div' to paint div instead of span – Vipin Verma May 17 '16 at 14:12
  • so now you should have `
    ` instead of ``, but at least it is no longer mysterious :)
     – wintvelt May 17 '16 at 15:17