mercredi 29 juin 2016

how to render random objects from an array in react?

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