CODEWITHSUNDEEP
javascriptreactjs
Umair Shah
Umair Shah

Reputation: 2280

Getting Uncaught Invariant Violation: ReactCompositeComponent.render(): error?

I have just started learning ReactJS and on running my app for first time I am getting the following error as :

main.js:820 Uncaught Invariant Violation: ReactCompositeComponent.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

I have hosted my project at Github as the main.js file is too large to add in here so that's why here is the link to the main.js as :

https://github.com/nicefellow1234/react-skeleton/blob/master/public/js/main.js

The Error started when I modified this line as :

ReactDOM.render(React.createElement(List,null), document.getElementById('ingredients'));

This Question of mine is related to this one older question :

Can anyone let me know why am I getting this error?

Upvotes: 0

Views: 442

Answers (2)

QoP
QoP

Reputation: 28397

You are always returning a String instead of an Element in your render methods.

You got

var List = React.createClass({
    render: function() {
        var listItems = ingredients.map(function(item) {
            return "<Listitem key={item.id} ingredient={item.text} />"; // This is wrong
        });
        return "<ul>{listItems}</ul>"; // This is wrong
    }

});


var ListItem = React.createClass({
     render: function() {
         return ("<li><h4>{this.props.ingredient}</h4></li>"); // This is wrong
     }

});

and it should be

var List = React.createClass({
    render: function() {
        var listItems = ingredients.map(function(item) {
            return <ListItem key={item.id} ingredient={item.text} />;
        });
        return <ul>{listItems}</ul>;
    }

});


var ListItem = React.createClass({
    render: function() {
          return (<li><h4>{this.props.ingredient}</h4></li>);
     }

});

jsfiddle example

PD: Next time you should add your components instead of your bundle file in the question, it will be easier to help you.

Upvotes: 1

Shanky Munjal
Shanky Munjal

Reputation: 671

I did not read the whole js file as it is very big but this error comes when you do not return in render method. Make sure you are using return statement in every render method.

Upvotes: 0

Related Questions