React Component Rendering but not visible in Rails Application

Question

As the title says, none of my react components are visible when I run rails server. I am using the gem react-rails. I know they're rendering because when inspecting the body tag of the page, it has <div data-react-class="Home" data-react-props="{}"></div>.

To test if it was my computer, I made another rails application, created a react component in my root with the exact same format, being

class Home extends React.Component {
  render() {
    return (
      <h1>Hello</h1>
    )
  }
}

and it showed up on screen. I have absolutely no errors in my console, so I have no idea what the problem is. The difference between the two rails apps(the visible and non visible) are that the broken one is using devise, bootstrap, and has more migrations/models/controllers. Also, I removed turbolinks in the broken one, but even adding it back in, it doesn't make a difference.

because it doesn't show up on stackoverflow otherwise, theres no spaces in my actual app — Nico
– Nico, Commented Oct 18, 2016 at 20:43
you just need to format your text into code, and it will display properly, also @MatthewHerbst "caret" — azium
– azium, Commented Oct 18, 2016 at 21:24
@azium stupid auto-correct! @Nico: to format on SO correctly you can highlight all your code and click the {} button in the text editor, or, just make sure the entire code block is indented 4 spaces. If you want to set the language you can do that by referencing meta.stackexchange.com/questions/184108/… — Matthew Herbst
– Matthew Herbst, Commented Oct 19, 2016 at 0:08
I would check if react_ujs is required in the js bundle. After that I would inspect the bundle that the js got transpiled corrently. — Barna Kovacs
– Barna Kovacs, Commented Oct 21, 2016 at 12:13

oskrgg · Accepted Answer · 2020-04-17 21:38:34Z

I was facing the same problem. Using react-rails gem.

No console error, webpacker compiled successfully. Also helper was working good react_component('Home') cause I could see in the html

<div data-react-class="Home" data-react-props="{}"></div>

When installing the gem the following example was within:

// Run this example by adding <%= javascript_pack_tag 'hello_react' %> 
// to the head of your layout file,
// like app/views/layouts/application.html.erb. 

// All it does is render <div>Hello React</div> at the bottom
// of the page.

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'

const Hello = props => (
  <div>Hello {props.name}!</div>
)

Hello.defaultProps = {
  name: 'David'
}

Hello.propTypes = {
  name: PropTypes.string
}

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <Hello name="React" />,
    document.body.appendChild(document.createElement('div')),
  )
})

Which was working good.

But the component is rendered when DOMContentLoaded event triggers. So the component was rendered by the client.

Anyways, reading the documentation found prerender

prerender: true to render the component on the server.

So using =react_component("Home", {}, {prerender: true}) worked to me.

Collectives™ on Stack Overflow

React Component Rendering but not visible in Rails Application

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related