CODEWITHSUNDEEP
reactjsecmascript-6react-router
zahabba
zahabba

Reputation: 3231

Component not being imported into app

I'm setting up a simple React app that, by default, renders a feed of article items, but also, using react-router, can pull in similar lists. The problem is that I can't seem to import the components paired with the routes.

Index.html

<html>
<head></head>
<body>
<!-- hard-coded header -->
<div id="react-content"></div>
<script src="bundle.js"></script> <!-- webpack js bundle -->
</body>
</html>

In webpack bundle.js:

routes.js

import React from 'react';
import {render} from 'react-dom';
import {Router, Route, IndexRoute, hashHistory} from 'react-router';
import {Feed} from './Feed';

console.log('routes.js fired');

var App = React.createClass({
  render() {
    return (
      <div className="app">
      </div>
      );
  }
});

console.log(Feed);

render((
  <Router history={hashHistory}>
    <Route path="/" component={Feed} />
  </Router>
  ), document.getElementById('react-content'));

Feed.js

import React from 'react';
import {render} from 'react-dom';
import {Link} from 'react-router';

var SearchBox = React.createClass({
  getInitialState: function() {
    console.log('getInitialState fired');
    return {query: ''};
  },
  render: function() {
    return (
    // render - should work fine
      );
  }
});

var ItemList = React.createClass({
  render: function() {
    var itemNodes = this.props.data.reverse().map(function(item) {
      return (
         // list rendering - works fine on its own
        );
    });
    return (
      // render
      );
  }
});

var Feed = React.createClass({
  loadItemsFromServer: function() {
    // ajax call
  },
  getInitialState: function() {
    console.log('Feed fired');
    return {data: []};
  },
  componentDidMount: function() {
    this.loadItemsFromServer();
  },
  render: function() {
    return (
     // render
    );
  }
});

export default Feed; // have also tried export {Feed};

When I run, I get routes.js fired so the file is being invoked.

However, console.log(Feed) displays undefined. (When I console.log either React or render I get the expected object)

Is there something wrong with the way I'm importing/exporting or otherwise making the component available?

Upvotes: 0

Views: 57

Answers (1)

Phi Nguyen
Phi Nguyen

Reputation: 3056

{Feed} from ... means that you export the variable Feed which is private in your Feed module. That's why you get undefined when you export the Feed variable. Because you already set export default Feed, so just call Feed from .. without the curly brackets.

Upvotes: 1

Related Questions