React weather app help [Solved]

Hello,

I have a strange error on my weather app that I’m building.
You can find the repo here.

Here is the error I encounter:

var React = require('react');
//var WeatherForm = require('WeatherForm');

var Weather = React.createClass({
   render: function() {
       return (
           <div>
               <h3>Weather Component</h3>
               {/*<WeatherForm/>*/}
           </div>
       );
   } 
});

module.exports = Weather;

This is one component (Weather) and within I want to have another component (WeatherForm) :


var WeatherForm = React.createClass({
   renter: function() {
       return (
           <div>
               <input type="text"/>
               <button>Get Weather</button>
           </div>
       );
   } 
});

module.exports = WeatherForm;

The app is running fine when the code from Weather is commented out (as it is now). But when I want to run it with the WeatherForm component running, it doesn’t show anything on rendering on the webpage.

I am following the tutorial from udemy. I did exactly what he did, even checked 2 times, but it doesn’t work for some reason… It might be that he is using another version of modules? (I upgraded them to the latest version). So far it worked great on everything he thought. And importing one component within another is something generic…
I don’t know what the problem is. Can someone look at it and guide me please? :slight_smile:

P.S. I don’t have any errors in my console. Just that I don’t see anything on my localhost:3000/ …

render not renter

2 Likes

Thank you very much! :slight_smile:

Do you know some modules or something that would show errors on jsx/react?

those damned typo’s. you can look for them for hours, then a fresh pair of eyes comes along and spots it in 2 seconds :eyes:

1 Like

Exactly! :expressionless: Well… thanks to FCC community that we can ask each other a pair of fresh eyes xD

And worst is when those typos don’t cause any errors, like if (a = 1) or renter: function() :wink:

Haven’t found one :unamused:
I don’t think any checker would find such error, because it’s perfectly valid syntax.

2 Likes

Indeed… probably just some specific code parser for react that would tell you something like: “You need to have a render function”.

Not sure if you use Atom @Flopet17 but,

or

https://orktes.github.io/atom-react/

maybe you can get a plugin for your editor if not Atom?

1 Like