cards.js | Javascript library for card games | Game Engine library

I work with react-multi-carousel, and i try to create cusstom button outside slider, but when i create custom buttons, i have some errors:

I use this code:

On my personal portfolio, I have a "Projects" page where I display different projects using Bootstrap cards. I render them all in from my CardData.js file, then map the values to a ProjectCard component. I would like to have 3 cards per row with the set margins and spacing that I currently have. Currently, if I add more than 3 cards, it smushes the cards all together into one row.

Any help or feedback is appreciated!

• Projects.js (Page component):

I have an issue where when my user is a new user both my create profile and create characters to FireBase Realtime database are not loading before my user profile page renders. I understand that useEffects run after the render. But after user profile and characters are created in the database I don't have the issue. I can log off and refresh my app, sign in and everything loads in time. Here is m code. I've tried writing my functions inside the useEffect several different ways and I get the same results every time. I saw one post where someone using a .then() but that doesn't appear to work in my situation. I rather not use any additional add-ins like AXIOs or other packages. I feel like there has to be a way to do this with the native built in tools of React and Firebase. Any advice is much appreciated. Edit: Here is my layout.
App.js

Good evening everyone, I need some help. I can't solve a warning:

Keyframes.js:20 The component styled.p with the id of "sc-iseJRi" has been created dynamically. You may see this warning because you've called styled inside another component. To resolve this only create new StyledComponents outside of any render method and function component.

In this link ( https://pastebin.com/a0kMztfD ) is an example of how I use the styled-component. In a checkboxes file I have all the functions I use for the styled-component rules, which I then call in the App.js file to assign them to a const variable to use in the return() How could I solve this problem? It doesn't create any errors for me but of course it creates a thousand warnings.

I also put the code in addition to the link put previously:

In cards.js:

Learning how to do webdev for the first time, and to make things neater, I'm storing my scripts in their own files. I've been trying to figure out how to access elements from this separate file but I cannot figure out how.

This is the relevant bit of the JS file

In my Home component(I call it Home Page!) I am using Cards.JS component which has posts attribute as shown in following code.

Here is my Console with console logged values.

Home Page is called 4 times i dont know why and Cards.js is also called even if i am checking for loading.

Here is my Home.js Code. I have tried removing dependency from effect hook but didn't worked.

I am new to React and facing an issue with updating the state of a functional component.

I have a component TinderCards.js like below, which basically takes in a list of objects from a context provider and for each object, creates a TinderCard (https://www.npmjs.com/package/react-tinder-card) which is supposed to update the count when swiped (onSwipe).

However, what happens is that every time a card gets swiped, the count gets increased to 1 and then doesn't go any further.

E.g.

Initial count value: 0

Swipe first card => count = 1

Swipe second card => count = 1 (should be 2)

Swipe third card => count = 1 (should be 3)

I have tried including the count value as both part of the Component's state and as part of a global context called ResultsContext.js, but both lead to the same behaviour.

NOTE that the button with class test-btn behaves EXACTLY how I want at onClick. However, the onSwipe for the TinderCard Component doesn't, even though it's basically the same code and it's driving me crazy.

TinderCards.js

Application desc:

I'm trying to create an HTML template which takes in an array of card objects and uses the data contained within to generate a page to display the list of cards. For each card in this list, I'm supposed to have a link that points to the URL for that specific card (e.g., http://localhost:3000/cards/that_card’s_id) and the link text should indicate the card’s name and unique ID.

Basically, I would type node server.js in my cmd bar and then open google chrome and type localhost:3000 in my address bar, and it would take me to the cards html page which displays all the links. When I click on a specific card, it should take me to another html page that just displays text showing the card name and cost of the card.

Problem:

I created a server. The problem is, when I type in localhost:3000 in my address bar, the page doesn't seem to load. I can't even test to see if my code works as the page doesn't load at all. The page just says "This page isn't working" and "localhost didn’t send any data." I was told it's because in my server code, I'm listening for request urls /cards , /cards/ and /cards? . When I try to access localhost:3000 , the request url is / , so I am trying to access a url that I am not handling.

server.js: