Search code examples
javascriptreactjsreact-dom

ReactDom.render keeps producing undefined prop?


Im pretty sure there is simple answer here. Im still a newbie on React. In the DOM I seem to get values for my console logs, which i'm incrementing just to keep track of how many passes its making (confused by that alone). But at what point is this prop becoming undefined? Here is my code.

"use strict";
import ReactDOM from 'react-dom';
import React from 'react';

var colors = ["Red","Green","Blue","Yellow","Black","White","Orange"];
var n = 0;
function increment(){
  n++;
  return n;
}

var List = React.createClass({
  getInitialState: function() {
    console.log("SORT1::",this.props.data + "  " + increment(n));
    return {data: this.props.data};
  },
  render: function() {
    console.log("SORT2::",this.props.data + "  " + increment(n));
    return <ul>
      {this.props.data.map(function(item,i) {
        return <li key={i}>{item}</li>;
      })}
    </ul>
  }
});

ReactDOM.render( <List data={colors} />, document.getElementById('app-container'));

export default List;

Here is what my DOM looks like:

dom

Here is some additional code code be affecting this. My index.js:

export MasterPage from './MasterPage'
export IndexPage from './IndexPage'
export HomePage from './HomePage'
export LoginPage from './LoginPage'
export RegisterPage from './RegisterPage'
export ResetPasswordPage from './ResetPasswordPage'
export VerifyEmailPage from './VerifyEmailPage'
export ProfilePage from './ProfilePage'
export ChangePasswordPage from './ChangePasswordPage'
export sortable from './sortable.js'

Any my react router:

import React from 'react';
import ReactDOM from 'react-dom';
import { IndexRoute, Route, browserHistory } from 'react-router';
import ReactStormpath, { Router, HomeRoute, LoginRoute, AuthenticatedRoute } from 'react-stormpath';
import { ChangePasswordPage, MasterPage, IndexPage, LoginPage, RegisterPage, ResetPasswordPage, 
VerifyEmailPage, ProfilePage, HomePage, sortable } from './pages';

ReactStormpath.init();

ReactDOM.render(
 <Router history={browserHistory}>
<HomeRoute path='/' component={MasterPage}>
 <IndexRoute component={IndexPage} /> 
  <LoginRoute path='/login' component={LoginPage} />
  <Route path='/verify' component={VerifyEmailPage} />
  <Route path='/register' component={RegisterPage} />
  <Route path='/change' component={ChangePasswordPage} />
  <Route path='/forgot' component={ResetPasswordPage} />
  <AuthenticatedRoute>
    <HomeRoute path='/home' component={HomePage} />        
  </AuthenticatedRoute>
  <AuthenticatedRoute>
    <HomeRoute path='/sortable' />        
  </AuthenticatedRoute>
  <AuthenticatedRoute>
    <Route path='/profile' component={ProfilePage} />        
  </AuthenticatedRoute>
 </HomeRoute>
  </Router>,
  document.getElementById('app-container')
 );

this is my html body for the one page application template:

<body>
  <div id="app-container"></div>
  <script src="/js/app.js"></script>
   </body>

Solution

  • colors isn't available on your global scope.

    1. remove this line from your sortable.js:

    ReactDOM.render(, document.getElementById('app-container'));

    1. In your react-router, update few lines:
    <AuthenticatedRoute>
        <HomeRoute path='/sortable' component={sortable} />        
    </AuthenticatedRoute>