:Post_id renders Post as undefined

[connelevalsam]

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
`

[shyamalVixplor]

I have found the solution!!!

Inside posts of initialState the type of id is mismatching with the post_id.

posts will be like=>

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'},
]
}

Enjoy:)