Hello,
thanks for your awesome work.
Learned React fast, using this but I've an issue
Post.js:
`
import React, { Component } from 'react';
import { connect } from 'react-redux';
class Post extends Component {
render() {
console.log(this.props);
const post = this.props.post ? (
<div className="tl dib w-80 shadow-2 mv2 br2 pa3">
<div className="cf">
<h3 className="lh-title fl-l">{ this.props.post.title }</h3>
<small className="tr fr-l">Posted by: { this.props.post.id }</small>
</div>
<p>{ this.props.post.body }</p>
</div>
) : (
<div className="center pv4">
<span className="blue dim">Loading posts...</span>
</div>
)
return (
<div className="tc">
<div className="pv3 ph5 m-auto">
{post}
</div>
</div>
)
}
}
const mapStateToProps = (state, ownProps) => {
// let usernames = ['', 'Dan', 'Liz', 'Ben', 'Ashley', 'Dave', 'Quin', 'Sasha'];
let id = ownProps.match.params.post_id;
console.log(id)
return {
post: state.posts.find(post => post.id === id)
}
}
export default connect(mapStateToProps)(Post)`
Home.jsx:
`
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import Img from '../assets/img/poke.png';
import { connect } from 'react-redux';
class Home extends Component {
render() {
const { posts } = this.props;
const postList = posts.length ? (
posts.map(post => {
return (
<div className="tl dib w-80 shadow-2 mv2 br2 pv3 pl5-l post overflow-hidden" key={ post.id }>
<img src={Img} alt="icon image" className="w4"/>
<h3 className="lh-title">{ post.title }</h3>
<p>{ post.body.slice(0, 40) }...</p>
<Link to={ '/'+post.id } className="link grow bg-blue white pa2 br2">
<span>Read more</span>
</Link>
</div>
)
})
) : (
<div className="tl dib w-80">
<h4>No posts</h4>
</div>
)
return (
<div className="tc home">
{ postList }
</div>
)
}
}
const mapStateToProps = (state) => {
return {
posts: state.posts
}
}
export default connect(mapStateToProps)(Home)
rootReducer.js:
`
const initState = {
posts: [
{id: 1, title: 'qui est esse', body: 'quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto'},
{id: 2, title: 'ea molestias quasi exercitationem repellat qui ipsa sit aut', body: 'et iusto sed quo iure voluptatem occaecati omnis eligendi aut ad voluptatem doloribus vel accusantium quis pariatur molestiae porro eius odio et labore et velit aut'},
]
}
const rootReducer = (state = initState, action) => {
return state;
}
export default rootReducer;`
if I click on read more to show the detail view, I always get empty: undefined
`