user3576036
user3576036

Reputation: 1425

Uncaught ReferenceError: controller is not defined in react js

This is the second tutorial that I am following due to failure in versions and dependencies in the earlier. As you can guess I am just trying to get started with react here.

I created a controller called Appointments. This is my controller jsx inside the components folder.

app/assets/js/components/appointments.jsx

var Appointments = React.Component({
    render: function() {
        return (
         <h1>React calender</h1>
        )
    }
});

appointments/index.html.erb

<%= react_component 'Appointments' %>

And I restarted rails server. All I see is a blank browser and console showing this

Uncaught ReferenceError: Appointments is not defined 

Upvotes: 1

Views: 713

Answers (1)

Siya Mzam
Siya Mzam

Reputation: 4705

What you most probably meant to do is this

const Appointments = React.createClass({
    // ...
    render() {
    return <div>{this.state.hello}</div>;
  }
});

Which is not a very good thing if you plan to or have internal state and/or refs

It is recommended to rather do it like this

class Appointments extends React.Component {
   // ...
  render() {
    return <div>{this.state.hello}</div>;
  }
}

So in your case your component should change from:

var Appointments = React.Component({
  render: function() {
    return (
     <h1>React calender</h1>
    )
  }
});

to this:

class Appointments extends React.Component {
  render() {
    return (
     <h1>React calender</h1>
    )
  }
}

Upvotes: 2

Related Questions