Spot The Difference: A PR to Differentiate between the blog URL and the RSS

Background

Telescope project is still a work in progress, like most codes are. There is always something to improve. This time, it started with user confusion about what to enter during sign-up on the website. Not everyone knows the differences between a blog URL (blog's root HTML) and the RSS (blog's feed XML), so people naturally try to enter the wrong things and get confused. My PR was meant to add a bit of explanation to amek it clear.

Process

I started by looking at the issue from the beginning to understand the full context, then I briefly imagine how the fix can be done at the conceptual level that's not specific to a given code or language before reading the code, like where to add text, how many variables I might need, do I need a loop...and so on, I then look at the code to see what can be done and how, to bridge between the code and my concepts.

I tried quite a number of things. I quickly realized some solutions don't produce the result I want, like adding \n and <br/> directly to format the text. The webpage will simply print them all out as text. I then tried to add them as separate elements, but someone suggested that use array instead to make it more flexible to allow more or less things to be added as needed.
I did that and use map() to render the string elements of the array with
, which saved more space than adding them as separate elements.

TypeScript code:

            {promptExamples?.map((example) => (
              <>
                <br />
                {example}
              </>
            ))}

If there's no value assigned, nothing gets rendered.

This turned out to be even better, as there is another page that uses the same type I was trying to modify, which would get affected if I didn't go with the suggestion. That page doesn't use any example.

Learning

This gets me more practice with TypeScript and tyrign to adhere to code structure of other people's work. Something that makes you think harder because you are working with more constrains to your solution. This one is close to some of the PRs I did for Hacktoberfest. As long as I learn something, it's all good.