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:
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>
colors
isn't available on your global scope.
sortable.js
:ReactDOM.render(, document.getElementById('app-container'));
<AuthenticatedRoute> <HomeRoute path='/sortable' component={sortable} /> </AuthenticatedRoute>