So far I managed to get things done the way I needed but I know I am doing some things not very elegantly. Now I am beginning to understand some concepts and I am trying to remake some elements in my project “the right way”.
My project basically list documents from several collections, but the template or card for each element is almost the same. Only a few differences like:
If the document is located in the original collection, it has an icon with a heart so when the student click it, he/she saves that document in its own collection “favorites”.
When that specific document is located in “favorites”, it is exactly the same but the heart changes for a crossed heart icon that would remove from the “favorite” collection the document.
I have another collection named “homework” that has a specific icon as well.
So far I was able to achieve this creating three different components that are exactly the same but changing these icons. I believe that the right way to do this would be to have just one component with different states so these icons would be different according with the state.
So I wonder, am I right about approaching this using the states of the component? If so, how would I indicate in the script about the collection location and change the state accordingly?