Render "namespaced" component react-rails

Question

I'm currently using React with a Rails 5.2.0 application, with the react-rails gem.

To keep a clean distribution of files, I want to store them within their specific folder, and for that I want to namespace the components I'm going to need.

The gem's implementation works well and I can render the trivial GreetUser component without problem. The challenge comes when I want to add a namespace, and I'm not really sure if React, react-component (helper) or any other supports it (as Rails would do it).

My attempt trying to render a Policies component:

# view
<%= react_component 'Policies.Policies' %>

# component
# app/javascripts/components/policies/Policies.js
import React from 'react'
import PropTypes from 'prop-types'

export default class Policies extends React.Component {
  render() {
    <div>
      <h1>I'm watching you</h1>
    <div>
  }
}

And I get:

Error: Cannot find module './Policies'.
ReferenceError: Policies is not defined
Uncaught Error: Cannot find component: 'Policies.Policies'. Make sure your component is available to render.

score 1 · Accepted Answer · edited Apr 03 '20 at 09:50

1

In the view you should use slashes (/) not dots in the namespace:

<%= react_component 'Policies/Policies' %>
Your Policies directory should be capitalized:

app/javascripts/components/Policies/Policies.js

Should work

edited Apr 03 '20 at 09:50

Andrew Zelenets

113
9

answered Aug 30 '18 at 03:00

Alex Antonov

14,134
7
65
142

You're completely right!. It works at what level? Javascript, es6, React or what?, I saw some approaches creating window classes and then specifying the inheritance. – John Bonachon Aug 30 '18 at 03:19

Render "namespaced" component react-rails

1 Answers1