title: How to render random objects from an array in React?
body: <p>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. </p>
  
  <p>This is my code:</p>
  
  <p>RecommendedPost/index.js</p>
  
  <pre><code>import React from 'react';
  import { Link } from 'react-router';
  
  class RecommendedPosts extends React.Component {
  
  render() {
  return (
    &lt;ul&gt;
      {this.props.posts.map((post, idx) =&gt; {
        return (
          &lt;li key={idx}&gt;
            &lt;p&gt;{post.title}&lt;/p&gt;
            &lt;p&gt;{post.text}&lt;/p&gt;
            &lt;p&gt;{post.category}&lt;/p&gt;
            &lt;Link to={`/blog/post-1/:${post.id}`}&gt;Weiter lesen&lt;/Link&gt;
          &lt;/li&gt;
        );
      })}
    &lt;/ul&gt;
  );
  }
  }
  RecommendedPosts.propTypes = {
  posts: React.PropTypes.array,
  };
  export default RecommendedPosts;
  </code></pre>
  
  <p>Then I use this component in my container:
  BlogPage/SinglePostPage/index.js</p>
  
  <pre><code>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 (
     &lt;div&gt;
     // here, I pass the posts array to my component
     &lt;RecommendedPosts posts={posts} /&gt;
     &lt;/div&gt;
    );
    }
   }
  }
  export default connect(null, mapDispatchToProps)(PostPage);
  </code></pre>
  
  <p>My idea is to render the posts randomly using the id as a ref but again I can't find the way. </p>
  
  <p>Hope some one can help me, and sorry if the answer is too obvious for everyone.</p>