CODEWITHSUNDEEP
javascriptruby-on-railsrubyreactjswebpacker
RedOster
RedOster

Reputation: 325

React Component Not Rendering after Webpacker refactoring

I am trying to shift from react-rails to webpacker for my Rails 5.1.3 app - and am using the webpacker-react gem. Everything seems to be loading fine (no errors), however the React component itself won't render.

in application.js

import WebpackerReact from 'webpacker-react'
import UserSchedule from 'components/userschedule'
console.log('First test')

in my erb view:

<%= react_component 'UserSchedule', render(template: 'appts/user-sched.json.jbuilder') %>

Inside the UserSchedule.jsx I have this code:

var React = require('react');
var ReactDOM = require('react-dom');

console.log('User schedule file test')

class UserSchedule extends React.Component {
  render() {
    console.log('User schedule inside render')
    return (
      <div className="container-fluid">
        <p>TEST THAT THIS WORKS</p>
      </div>
    );
  }
}

The console logging works on everything except for inside the render.

User schedule outside test
First test

So I know the jsx file is loading. And inside the rendered elements the proper html tag is showing up:

<div data-react-class="UserSchedule" data-react-props="&quot;{\&quot;appts\&quot;:[{\&quot;title\&quot;:\&quot;Isobel ...

So what am I doing wrong? Anyone else do this shift before from the react-rails to webpacker with the webpacker-react gem?

Upvotes: 1

Views: 591

Answers (1)

Huzai
Huzai

Reputation: 38

Try to add this to your js file

WebpackerReact.setup({UserSchedule})

and this too

var React = require('react');
var ReactDOM = require('react-dom');

console.log('User schedule file test')

class UserSchedule extends React.Component {
  render() {
    console.log('User schedule inside render')
    return (
      <div className="container-fluid">
        <p>TEST THAT THIS WORKS</p>
      </div>
    );
  }
}    
export default UserSchedule; //add this

Upvotes: 1

Related Questions