Skip to content

Instantly share code, notes, and snippets.

@kevgathuku
Last active June 7, 2018 05:24
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save kevgathuku/8bd81a6e94ee7db37df284bc912aa386 to your computer and use it in GitHub Desktop.
import React, { Component } from "react";
import { Link } from "react-router-dom";
import { allPosts, recommendedPosts } from "./posts";
class PostDetails extends Component {
constructor(props) {
super(props);
this.state = {
postDetails: {
id: "",
title: "",
body: ""
}
};
}
componentDidMount() {
const { match: { params: { postId } } } = this.props;
this.fetchPostData(postId);
}
fetchPostData = postId => {
const post = allPosts.find(post => post.id == postId);
this.setState({
postDetails: post
});
};
render() {
return (
<div className="App">
<header className="App-header">
<h1 className="App-title">{this.state.postDetails.title}</h1>
</header>
<p className="lead">{this.state.postDetails.body}</p>
<section>
<h4>Recommended Posts</h4>
{recommendedPosts.map(post => (
<div key={post.id}>
<Link to={`/posts/${post.id}`}>
<p>{post.title}</p>
</Link>
</div>
))}
</section>
</div>
);
}
}
export default PostDetails;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment