Uncaught ReferenceError: controller is not defined in react js

Question

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

Instead of var Appointments = React.Component, try class Appointments extends React.Component — Siya Mzam
– Siya Mzam, Commented Dec 4, 2017 at 8:53
I just replaced that line like you said. Now I am getting a syntax error at }); in appointments.jsx. Saying unexpected token — user3576036
– user3576036, Commented Dec 4, 2017 at 8:57

Siya Mzam · Accepted Answer · 2017-12-04 08:59:39Z

2

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>
    )
  }
}

answered Dec 4, 2017 at 8:59

Siya Mzam

4,7251 gold badge31 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3576036 Over a year ago

This is now displaying the h1 element. But now I am getting a console error like Uncaught ReferenceError: require is not defined. I been getting this error in another tutorial that I was following. It would be really great if you tell me how to get rid of this. I have actually posted a question about that issue but wasnt able resolve anything.

Siya Mzam Over a year ago

May you please share the link to the question?

user3576036 Over a year ago

stackoverflow.com/questions/47627098/…

Collectives™ on Stack Overflow

Uncaught ReferenceError: controller is not defined in react js

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related