First Time Fixing Bug in Other’s Repo

I fixed a bug!!! For my second PR, I chose Harvesthru-web repo. Here is the brief intro about what they do:

Harvesthru is a community focused marketplace platform where users can buy, sell and trade homegrown crops.

I found an issue which was created Nov 13, 2019 on their repo. The issue was about removing an error message associated with React. More specifically, the error was about not having an unique key for each child in a list.

https://github.com/Harvesthru-Inc/Harvesthru-Web/issues/30

Prepare Your Working Stage

I have some experience working with React because of one of my course. When I saw this error, I knew right away what and where it is coming from. Following the regular steps, I forked their repo, cloned it, make my issue branch, added remote upstream branch, and updated with all the recent commits.

Understanding The Code

The second step was looking at their code carefully and try to understand their code as much as I can. I reproduced the error by running npm start and went to their profile page. I found the error was coming from this specific file, Component.jsx.

Research about The Bug

I searched about the bug to understand why we must need unique key and when do we need it. I came across an article where I found the answer,

React uses the key prop create a relationship between the component and the DOM element. The library uses this relationship to determine whether or not the component should be re-rendered.

Apply What You Learn

Now I know why I need an unique key for each items in a list/map. The next step is to figure out where they are using list/map. They were using map in two places without assigning an unique key.

Line 46–51 and Line 134–136

All I had to do was assigned an unique key for each items. The property they were rendering is not unique so, I can not assign them as key. Therefore, I need to generate unique element. I remembered about `Math.random()`

I applied my previous knowledge and used `Math.random()` which returns unique number each time and can be used as unique key.

https://github.com/Harvesthru-Inc/Harvesthru-Web/pull/42

I tested multiple times and when I was satisfied, I sent my PR. It did not get merged yet because this repo has been inactive. However, I am happy that I made my first coding contribution to fix a bug.