StarRate | swift电商五星评价，星星评分控件，支持自定义数量、拖拽、间隔、设置最小星星数等操作 | DevOps library

I am coding an app in which there is a collection of reviews and a person can respond to a review, but each review can only have one response. So far, I am doing this by rendering a ReviewResponseBox component in my ReviewCardDetails component and passing the review_id as props. I have implemented the logic so that once there is one ReviewResponse, the form to write another will no longer appear. However, before I was initializing the state in this component with an empty array, so when I refreshed my page the response went away and the form came back up. (This is now commented out)

I am trying to resolve this by persisting my state using React LocalStorage but am having trouble writing my method to do this. Here is what I have so far:

Component that renders ReviewResponseBox and passes review_id as props:

I am struggling with figuring out how to implement conditional rendering in React. Basically, what I want to do is this: if there is a reviewResponse in the reviewResponses array, I no longer want to render the reviewResponseForm. I only want to render that ReviewResponse. In other words, each review can only have one response in this app. I am not sure what I am doing wrong when trying to implement this logic. I know I need to implement some kind of conditional statement saying if the length of my reviewResponses array is greater than 0, I need to render the form. Otherwise, I need to render that reviwResponse. Every statement I have written has not worked here. Does anybody have a suggestion? Here is my code so far:

My review cardDetails component renders my ReviewResponseBox component and passed the specific reviewId as props:

I am new to React overall and very new to React Router. I am building an app in which a list of reviews is displayed and when a user clicks a review card, they are redirected to a page that displays that card's details. I have the majority of the logic coded, but I am struggling with implementing React router. Here are my components so far.

I have a Product Card like this:

As you can see there is a hyperlink named Buy at the end of card.

But rather than this link, I need to make the whole card clickable with a another hyperlink. (so users won't need to click on the Buy link, they just can click wherever inside the card)

Here is the code of this Card:

I try to download a image from a website but I get an error. Can somebody help me and explain what is going on and how could I make a work around?

Sorry I'm completely new to programming stuff with websites.

I have star rating in HTML and CSS and it's working. But, the star is working backward, from right to left. I want it to work normal, from left to right. Please do suggest me a way. Thanks in advance.

The HTML code:

I have been trying to use material-ui and iterate over it inside an array ( for creating ratings for some items like in e-commerce sites). The code isn't working. On my localhost server, it's not showing any stars at all. Before I made it dynamic, it was working all fine, then I added props to my functional component as per to make it dynamic. Everything else is working just fine except that it's not accepting my matrial-ui icon inside the array for me to iterate over. Moreover, the import statement says "it's value is never read although it's imported"

My code: Product.js: