CODEWITHSUNDEEP
javascriptreactjsreact-redux
redixhumayun
redixhumayun

Reputation: 1844

React and Redux not rendering view

so I am developing a small book keeping application in React+Redux. But, for some reason the view will not render, and I don't know why. The code does not throw up an error either.

Here is the structure of my app. 

src
----actions
----components
             ----App.js
----containers
             ----bookList.js
----reducers
             ----book.js
             ----index.js
--index.js

Here are the individual files

index.js/src

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.js';
import {Provider} from 'react-redux';
import {createStore} from 'redux';
import rootReducer from './reducers/index.js';

let store = createStore(rootReducer);


ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>, 
    document.getElementById('root')
);

/components/App.js

import React from 'react';
import bookList from '../containers/bookList.js';

const App = () => {
  return (
    <div>
      <bookList />
    </div>
  )
}

export default App;

/containers/bookList.js

import React, {Component} from 'react';
import {connect} from 'react-redux';

class bookList extends Component {
    renderList() {
        return this.props.books.map(book => {
            return <li key={book.title}>{book.title}</li>
        });
    }

    render() {
        return (
            <ul className='list-group col-sm-4'>
                {this.renderList()}
            </ul>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        books: state.books
    }
}

export default connect(mapStateToProps)(bookList);

/reducers/index.js

import {combineReducers} from 'redux';
import books from './books.js';

const rootReducer = combineReducers({
    books: books
});

export default rootReducer;

/reducers/book.js

const books = () => {
    return [
        {title: 'JavaScript'}, 
        {title: 'Harry Potter'}, 
        {title: 'Some Random Title'}
    ]
}

export default books;

Like I mentioned at the beginning, absolutely no errors being thrown up, and any console.log statements I attempt to execute in the bookList.js file, don't show up.

Its like that file is not being read by the Babel compiler.

However, when I log the bookList function I import from bookList.js into App.js, it prints out a connect function. So, that file is clearly being imported.

Upvotes: 0

Views: 923

Answers (2)

David Guan
David Guan

Reputation: 4290

You can check out this: User-Defined Components Must Be Capitalized.

In case the link become invalid:

When an element type starts with a lowercase letter, it refers to a built-in component like or and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.
We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.

Upvotes: 2

redixhumayun
redixhumayun

Reputation: 1844

Okay, I have an answer for you guys, and I think it is absolutely going to blow your mind just like it did mine.

So get this, apparently all I needed to do was change 'bookList' to 'BookList' in any occurrence of the word in the App.js file and the bookList.js file.

I have no idea why it works that way. If somebody could explain that, I would be very thankful. Because this is the first time I've come across code failing because of a difference in naming syntax.

Upvotes: 0

Related Questions