71
rated 0 times
[
75]
[
4]
/ answers: 1 / hits: 24081
/ 8 Years ago, wed, june 29, 2016, 12:00:00
I just started learning React in my work and I need to build a blog using React. I need to show random posts as recommended Posts, after doing some research I found a possible solution, 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't find the way.
Hope some one can help me, and sorry if the answer is too obvious for everyone.
More From » random
