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.

Answer 1

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

   <%= react_component 'Policies/Policies' %>

2. Your Policies directory should be capitalized:

   app/javascripts/components/Policies/Policies.js

Should work