1

I have a simple Rails 5 app with the react-rails gem installed. I want to create a Navbar that will appear at the top of every page in my app. I'm new to React, so normally what I would do is include an erb tag in application.html.erb that would render a layout helper called _navbar.html.erb, and would appear above the yield block. How do I accomplish this same thing using the react-rails gem and a navbar component? Rendering a react component from application.html.erb like this does not seem to be working:

<body>
  <div id='app'>
    <%= react_component 'Navbar' %>
    <%= yield %>
  </div>
</body>

Maybe it has something to do with <%= javascript_include_tag 'application' %> in application.html.erb being inside <head> and the page not being fully rendered yet. Any help would be appreciated (bonus points for including the react-bootstrap navbar component!) Thanks!

Edit: I can now get something to display, but it's not formatted like a navbar. I'm using the react-bootstrap docs example but no luck yet.

screenshot

Craig Ness
  • 83
  • 1
  • 6
  • Is your `Navbar` Component in your `/components` directory? – Konstantin Kreft Jul 22 '17 at 21:02
  • Yes, and my components directory is being included by my application.js and components.js – Craig Ness Jul 22 '17 at 21:04
  • Oh, I just saw you forgot the parentheses... try `<%= react_component('Navbar') %>` – Konstantin Kreft Jul 22 '17 at 21:07
  • Hmm, I included the parentheses and it didn't change. However, I can now at least get something from my Navbar class to show on the page if I move the `<%= javascript_include_tag 'application' %>` to the bottom of ``. The problem now is, I'm trying to use react-bootstrap and it's not formatted at all... – Craig Ness Jul 22 '17 at 21:11

0 Answers0