I have a ReactJS parent functional component that renders 6 child components via props. Via a NextJS API Route I'm able to render each FaunaDB document to each child component. One of the props is a "like count".
The problem is that I don't know how to write an API route that will allow the heart button on each component to update just that component's like count, if clicked. The reason for my difficulty is that the update API typically requires a document ref, but since there are 6 documents (one for each child component) that would mean 6 API Routes, which is inefficient.
What I want is one API for updating the like count, irrespective of the child component that is interacted with and 'like-count incremented' via a click.
One option is to create a new document, which stores the like count for each paper by index and render that to the parent and child components. Then this collection can be referenced via the NextJS front-end. But I'm not sure how to conditionally render FaunaDB data so that the like count is displayed in the first place.
Another option is to create an Index from the document's Collection, but I'm not sure how to reference an Index from the front-end.
I think that the correct solution might map over an array of values and just change the particular value in question when the user clicks. But again, I'm not sure how you can selectively render a FaunaDB array to the NextJS / React front-end in the first place.
I don't mind re-writing the db data (manually) since it's a small dataset to begin with.