I just started learning React in my work and I need to build a Blog using react. I need to show random posts as "recommendedPosts", after doing some research I found a possible solution which is using Math.random() but I could not figure it out how to implement it in my component. This is my code:
RecommendedPost/index.js
import React from 'react';
import { Link } from 'react-router';
class RecommendedPosts extends React.Component {
render() {
return (
<ul>
{this.props.posts.map((post, idx) => {
return (
<li key={idx}>
<p>{post.title}</p>
<p>{post.text}</p>
<p>{post.category}</p>
<Link to={`/blog/post-1/:${post.id}`}>Weiter lesen</Link>
</li>
);
})}
</ul>
);
}
}
RecommendedPosts.propTypes = {
posts: React.PropTypes.array,
};
export default RecommendedPosts;
Then I use this component in my container: BlogPage/SinglePostPage/index.js
import React from 'react';
// ...other imported stuff
import RecommendedPosts from 'components/Blog/RecommendedPosts';
class PostPage extends React.Component {
render() {
// dummy-recomended-posts
const posts = [
{
id: 1,
title: 'How to Cook Blue Meth',
description: 'Lorem ipsum dolor sit amet, turpis at, elit',
thump: 'thump.jpg',
hero: '/img/',
category: 'k1',
fullname: 'Walter White',
published: '10.05.2016, 15:30pm',
},
{
id: 2,
title: 'Passenger',
description: 'Lorem ipsum dolor sit amet, turpis at, elit',
thump: 'thump.jpg',
hero: '/img/',
category: 'k2',
fullname: 'Chino Moreno',
published: '10.05.2016, 15:30pm',
},
// ...and more dummy posts(about 7)
];
return (
<div>
// here, I pass the posts array to my component
<RecommendedPosts posts={posts} />
</div>
);
}
}
}
export default connect(null, mapDispatchToProps)(PostPage);
My idea is to render the posts randomly using the id as a ref but again I can find the way. Hope some one can help me, and sorry if the answer is too obvious for everyone.
Aucun commentaire:
Enregistrer un commentaire