card.js | quine business card | Business library

I have a small issue and do not have a good idea how to solve it. Hope you can help

I have created a simple Starrating component. You have five stars. If you click on one of the stars the state changes and so on ... (5 stars. Rating from 1 to 5 :D ). Just basic stuff.

The main problem is based on the fact that the Starrating component is a part of another component (AlbumList.js), which is rendered 5 times on the homepage (5 different pictures which you can rate) (between there is another component AlbumCard.js which is holding the Starrating component but I assume that's not important.

Basically I have 5 components which are the same and each one of them has the Starrating Component.

My main goal is to click on one of the pictures, rate that and send the right state to my database. The function which is sending the right rating to the database (rateAlbum), is invoked in useEffect, because only there I am able to send the new state to my database( outside useEffect I only have access to the new state after rendering, I guess).

Unfortunately if I reload the page or just make one rate the function is invoked as many times as pictures there are (5 times)

How do I call the function just ones if I just rated one picture or just after the onClick on the right picture with the new state ?

Starrating.js

I have found similar questions to this asked but none cover this specific scenario. In my react app, on a card with image, text and a button, I want to have text and button appear conditionally on hover, have the image scale increase, and the image brightness decrease. The problem is that when I hover over the button, the transform and filter properties on the image are cancelled. Does anyone have a solution?

Here is the code in Card.js

When I submit a form in React Native I get the below error undefined is not an object (evaluating 'title.length'). This problem occurs when I submit a form when the Card.js should be rendering the data from the form. I have checked and its getting the data back fine, seems to be a problem with rendering the data that its reading as undefined. After this error the form actually submits successfully and the Card.js displays the data.

Card.js

Below is the continue task module I am returning. The URL works fine when I hit it directly in the browser, but in teams, I always get this:

Task module reponse

Expected to get data one time

How do I prevent the following error:

Too many re-renders. React limits the number of renders to prevent an infinite loop.'

I just changed a class based component to functional component and its not working

My source code

I have a component called AlbumCard.js. In my AlbumList.js component I'm mapping through an Array and creating multiple AlbumCards components. Each AlbumCard has it its own id (it is the data.id of the album basically)

It should be possible to click on one AlbumCard and get to the next page, where you can see the whole AlbumCard with much more information (passing the data to the next component).

My Idea is, by  clicking on one AlbumCard, to get the id( data.id), make a get request with that id( data.id), store the returning data in my redux store and  display that in my next component (AbumPage.js). Unfortunately, that component gets rendered before my state updates. So I am getting an undefined error the first time I go to that page. If I refresh everything is working because the data is  already there. I am also using an asnyc onClick function inside the AlbumCard component. (I did not know how to build an onClick function which is getting the id(data.id) of that component, outside that component).

I tried conditinal rendering as well, but is not helping)

AlbumCard.js

I want to display the cards side by side but the cards are being displayed vertically.

The cards are coming one below the other. I want them side by side.

Here's the code

App.jsx

I am making a function ,which is at the begining ,all the message are 'unread' .. And once you click the message ,the unread will disappear .like the example as follow:

I had made a component Card.js :

I'm using React [^17.0.1] and arcgis-js-api [^4.18.1] for the app,

After 'npm start' I'm receiving the below errors,

The console errors are below,