RenderMatch | ground feature point matching leveraging the textured meshes | 3D Printing library

As part of a school project we are creating an application where users can match with each other if they play the same game. When you click on matchButton a random user that plays the game you have chosen will show up on the page. You can choose to like that user or continue hitting the matchButton to randomize another user.

Now we want to make sure that a user you have already liked won't be randomized and therefore not be rendered on the page.

The users that have been liked are saved in an array called match in the database, for each user. The users that play the same game are saved in an array called numOfMatches. So it is numOfMatches that we use to randomize a user.

I think I have to loop through numOfMatches and the match array in the database to see if the user in numOfMatches is already in the database. If so, I need to remove the user from numOfMatches so that it is not included in Math.random code.

I tried with this code in the last function in this post, but I am having a problem with understanding how to reach the elements in the match array in the users object and how to use splice (and in which function I should place the code since we use callbacks which I think is a bit tricky):

I have made 2 components : 1) content (which displays data using fetch() ) 2) pagination (total 5 pages 16 objects per page )

I have made 2 state variables called start:0 and end:16. Now whenever user clicks on page numbers I want to inject start and end state variables from pagination component to content component.

Logic for passing start and end variables to content is as follows: initially end=16*1 (1 is multiplied because page 1) and start= end-16 i.e start=0

end = 16*2 (2 is multiplied because page 2) and start=end-16 i.e start=16

These start and end variables are passed in .slice() of content component so that onClick: page 1 it should display article 0 to 16 page 2 it should display article 16 to 32 and so on till page 5

Below is code of pagination and content component:

content.js :

I have a method in a React component which fetches some data from an API

this.state.matches returns an empty array at first

I have 2 components 1)Content 2)Pagination

When I click on view stats button (see in screenshot) rendermatchinfo() method gets called and it shows details of single match and also shows pagination which should not be shown. Pagination must be shown only on home page where content component renders match details of all matches and not single match.

content.js :

I have created 3 components:

1. content
2. matchinfo
3. layout
4. pagination

Whenever I click on view stats button matchinfo component view is rendered which displays matchinfo of particular match. Whenever I click on view stats button (see screenshot) it also renders pagination component also which should not be rendered how can I fix this.

Component matchinfo is child component of content component.

content.js :

I have made 2 components 1)Content.js 2)Pagination.js I want to display the content when user clicks on pagination component. There are total 16 objects per page. I have used .slice(0,16) method for page 1. Now I want to change the parameters passed in slice function based on page number eg:
.slice(0,16) --> for page 1 .slice(17,33) ---> for page 2 and so on till page 5 each page should display 16 objects per page and total 5 pages.

Content.js :

I have made component called content which displays match details of 16 matches. Now there is a button called view stats which onclick should render different view displaying details of that particular match. How can I make this in ReactJs. See screenshot for more clarification.

Content component :

I have made Matchinfo component and Navbar component. When I click on view stats button it should render Navbar(so that we can navigate back to home page and vice-versa) and Matchinfo component.

Content.js :

I have made cricket web app using ReactJS, NodeJS, MongoDB. On frontend I am displaying data from JSON objects per page I want to display 16 JSON objects. I am using .slice(0,16) method to slice JSON objects from REST API which returns 577 objects. Now how can I implement pagination for page 2,3,4,5.

For page 2 -> slice(17,33) For page 3 -> slice(34,49) and so on...

Below is my code and screenshot of my webapp:

in content.js :