ReactDom.render keeps producing undefined prop?

Question

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>

Is colors always define? Have you not changed it somewhere else? — FabioCosta, Jan 14 '17 at 20:48
I'm not working with React but probably you should not use `{this.props.data.map(function(item,i) {` try to replace `map` with `forEach`. — Mateusz Woźniak, Jan 14 '17 at 21:08
Do you by any chance has any other List component somewhere ? — FabioCosta, Jan 14 '17 at 21:12
No other List component. Im really just trying to follow a very basic tutorial on sortable lists. This is really all the code besides my middleware express server which is also very basic. http://webcloud.se/sortable-list-component-react-js/ — Puerto, Jan 14 '17 at 21:21
@MateuszWoźniak `forEach` would be useless here. `map` is required to return an array of list items — azium, Jan 14 '17 at 22:36
@Puerto with the code you have provided, nothing would indicate why the value of `n` would ever go beyond 2. You must be using this `List` component somewhere else, why would you be exporting it if you weren't? — azium, Jan 14 '17 at 22:39
Or at the very least, you have imported the file `sortable.js` somewhere else — azium, Jan 14 '17 at 22:40
@azium would my react-router possibly be causing this? i do have a router with the sortable page as well as index.js page. my router page entry is ' ' and my index page which is full of exports has an entry for 'export sortable from './sortable.js' ' would either of these cause the issue? — Puerto, Jan 14 '17 at 23:34
@azium i edited my original post with the additional code. Thanks for taking a look. — Puerto, Jan 15 '17 at 18:32

Allen · Accepted Answer · 2017-01-15T20:16:44.733

2

colors isn't available on your global scope.

remove this line from your sortable.js:

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

In your react-router, update few lines:

<AuthenticatedRoute>
    <HomeRoute path='/sortable' component={sortable} />        
</AuthenticatedRoute>

edited Jan 15 '17 at 20:16

answered Jan 15 '17 at 19:52

Allen

4,431
2
27
39

So i made the changes. I am only getting 2 console logs now (instead of 4 before). Mainly because i got rid of the ReactDom.render. But the 2 Im geting now are both undefined. so it would see the it is in the ReactRouter where im getting the undefined. – Puerto Jan 16 '17 at 19:16
– Puerto Jan 16 '17 at 19:16
These are my console logs in the dom now. SORT1:: undefined 1 SORT2:: undefined 2 – Puerto Jan 16 '17 at 19:18
Take a look at this: http://stackoverflow.com/questions/27864720/react-router-pass-props-to-handler-component. – Allen Jan 16 '17 at 19:26
Btw it would be better to diff the concept between `props` and `state` in react component. In your case, you're using `colors` as props, so they're immutable and supposed to be passed down from higher-level components(router in your case), if you want the component sortable itself to manage `colors` state, consider use it as `state` instead. – Allen Jan 16 '17 at 20:01
1

Sorry for delayed response. I added the colors array to my sortable route in my React router so it passes the prop down ( . Then in the page just worked with the prop that was being handed down from the router (this.props.route.colors ). It works now. Starting to understand this react router better now. Thanks for the help. React is a new world with it's dataflow. Thanks again! :) – Puerto Jan 20 '17 at 13:42

ReactDom.render keeps producing undefined prop?

1 Answers1