I am having an issue with rendering a list of posts on the index page. I can successfully create posts by clicking the 'Add Post' button and submitting the form on the /posts/new route. However, the list of posts is not showing up on the index page and there are no error messages displayed. Can someone please review my renderPosts method in the PostsIndex component and provide guidance on how to fix this issue? Thank you!
NETWORK
https://i.stack.imgur.com/M1V5x.png
ROOT INDEX
import ReactDOM from "react-dom";
import "./index.css";
import PostsIndex from "./containers/PostsIndex";
import PostsNew from "./containers/PostsNew";
import PostsShow from './containers/PostsShow';
import * as serviceWorker from "./serviceWorker";
import { Route, BrowserRouter, Switch } from "react-router-dom";
import { Provider } from "react-redux";
import { createStore, applyMiddleware } from "redux";
import reducers from "./reducers";
import promise from "redux-promise";
const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<BrowserRouter>
<div>
<Switch>
<Route path="/posts/new" component={PostsNew} />
<Route path="/posts/:id" component={PostsShow} />
<Route path="/" component={PostsIndex} />
</Switch>
</div>
</BrowserRouter>
</Provider>,
document.getElementById("root")
);
serviceWorker.unregister();
APP
import React, { Component } from 'react';
import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
import PostsIndex from './containers/PostsIndex';
import './App.css';
class App extends Component {
render() {
return (
<MuiThemeProvider>
<div>
<PostsIndex />
</div>
</MuiThemeProvider>
);
}
}
export default App;
POSTS INDEX
import React, { Component } from "react";
import { connect } from "react-redux";
import { fetchPosts } from "../actions/index";
import { bindActionCreators } from "redux";
import { Link } from 'react-router-dom';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import _ from "lodash";
class PostsIndex extends Component {
componentDidMount() {
this.props.fetchPosts();
}
renderPosts = () => {
return _.map(this.props.post, post => {
return (
<Link to={`/posts/${post.id}`}>
<List>
<ListItem key={post.id}>
<ListItemText primary={post.title}/>
</ListItem>
</List>
</Link>
);
});
};
render() {
return (
<div>
<h1>Blog About It</h1>
<Link to="/posts/new">Add Post</Link>
<List>
<ul>{this.renderPosts()}</ul>
</List>
</div>
);
}
}
function mapStateToProps(state) {
return {
posts: state.posts
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({ fetchPosts }, dispatch);
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(PostsIndex);