Instantly share code, notes, and snippets.

@kevgathuku /PostDetails.jsx Secret
Last active Jun 7, 2018

Embed
What would you like to do?
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