CODEWITHSUNDEEP
reactjs
DCR
DCR

Reputation: 15665

Having trouble with react tutorial, Invariant Violation

I'm trying to follow a react tutorial but it's not working. Here's the code:

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

/*
   App
*/

var App = React.createClass({
   render: function(){
        <div className='catch-of-the-day'>
            <div className='menu'>
              <Header />
            </div>  
        </div>
    }
});

var Header = React.createClass({
    render : function() {
        return(
               <p>Header</p>
            )
    }

});




//build first component
/* 
   StorePicker
*/


var StorePicker = React.createClass({

    render : function(){
        var name = 'Bob';
        return (
            <form className='store-selector'>
              {/* comments go here */}
              <h2>Please Enter A Store {/* {name} */}</h2>
              <input type="text" ref='storeId' required/>
              <input type="submit"/>
            </form>         
        )
    }
});


ReactDOM.render(<App/>,document.querySelector('#main'));

Here's the html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Catch of the Day!</title>
   <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Open+Sans' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="/build/css/style.css">
  <link rel="shortcut icon" href="http://facebook.github.io/react/favicon.ico">
</head>
<body>

    <input type="checkbox" id="fold">
    <label for="fold">Fold</label>

    <div id="main">
      <!-- This is where our React app will go -->
    </div>
    <div id='new'>
    </div>

  <script src="/build/main.js"></script>

</body>
</html>

and here's the error message:

Uncaught Error: Invariant Violation: App.render(): A valid ReactComponent
must be returned. You may have returned undefined, an array or some other 
invalid object.

Upvotes: 0

Views: 34

Answers (1)

Dave Newton
Dave Newton

Reputation: 160191

Your App#render doesn't return anything. More or less what the error message says.

Contrast App#render with Header#render.

Unrelated, but you might want to follow a more-recent tutorial; createClass is deprecated.

Upvotes: 1

Related Questions