I want to be able to display a max of 5 posts and then have to switch

Question

I am currently using react. What I would like to do is display dummy JSON data that looks like this

{
  "Posts": [
    {
      "title": "Title1",
      "author": "Author1",
      "postDate": "2014-03-12T13:37:27+00:00",
      "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"
    },
    {
      "title": "Title2",
      "author": "Author2",
      "postDate": "2014-03-12T13:37:27+00:00",
      "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"
    },
    {
      "title": "Title3",
      "author": "Author3",
      "postDate": "2014-03-12T13:37:27+00:00",
      "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"
    },
    {
      "title": "Title4",
      "author": "Author4",
      "postDate": "2014-03-12T13:37:27+00:00",
      "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"
    },
    {
      "title": "Title5",
      "author": "Author5",
      "postDate": "2014-03-12T13:37:27+00:00",
      "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"
    }
  ]
}

Inside of a component called posts.jsx.

import React, { Component } from 'react';
import Data from './dataa';
import '../css/posts.scss';

const DataPost = Data.Posts;

class posts extends Component {
  state = {};
  render() {
    return DataPost.map(d => (
      <div class="postContainer container">
        <div className="displayPost">
          <h1 className="postTitle">{d.title}</h1>
          <h3 className="postAuthor">{d.author}</h3>
        </div>
      </div>
    ));
  }
}

export default posts;

I would like to limit the amount of posts displayed to 5 and then a user will have to switch the page. Like a google search. I'm not sure how to code the logic so only 5 posts are displayed.

@MoshFeu Yes. I'm a bit of a noob so not sure how I can actually implement that into my project. — patbied, Dec 23 '19 at 15:08
Yes. You're right. It's not that simple. Anyway, there are more resources about pagination. For example: https://stackoverflow.com/a/40234427/863110, or https://codesandbox.io/s/l29rokm9rm. It's not obvious, of course, but not that complicated as well. — Mosh Feu, Dec 23 '19 at 15:24

score 0 · Answer 1 · answered Dec 23 '19 at 14:10

If you are looking for a pagination similar function, you can update your map function by adding a filter function to restrict the array from a start to end index.

DataPost.filter((val, index) => {
  return index >= 2 && index <= 6;
}).map(item => (
  <div key={item.id}>
    <label>
      {item.title}
    </label>
  </div>
))}

Find a working fiddle here: https://jsfiddle.net/2bpt9mhn/

Hope this is what you are looking for.

I want to be able to display a max of 5 posts and then have to switch

1 Answers1