react-star-ratings | customizable svg star rating component for selecting x stars | Icon 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 was working on a react project and suddenly this error occurred saying,

Failed to compile ../node_modules/react-dom/lib/ReactMount.js Module not found: Can't resolve 'react/lib/React' in 'C:\Users\Angelin\ecom\node_modules\react-dom\lib'

package.json:

Any idea how to resolve this error? I get it when trying npm install:

npm ERR! Found: react@16.14.0 npm ERR! node_modules/react npm ERR! react@"^16.14.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"^17.0.1" from react-card-flip@1.1.0 npm ERR! node_modules/react-card-flip npm ERR! react-card-flip@"^1.0.11" from the root project

The package.json has: "react-card-flip": "^1.0.11",

I removed the node_modules directory and the package-lock.json file.

I'm not sure where the reference to 1.1.0 is coming from. I DID try to install it earlier when trying to upgrade React 17, but ran into limitations with blueprintjs/core 3.39.0 requiring React 16.14.0.

Thanks for any ideas or help you can provide.

Full content of the package.json below in case that helps.

package.json content:

I am trying to deploy a MERN app to Heroku and this is my error log and package.json file. Can anyone see what might be causing this? I am having trouble making sense of the logs.