Before attempting to create a dropdown menu with an array retrieved using useSWR, I first practiced creating one with a hardcoded array.
- I used this for the initial practice: https://codesandbox.io/s/76k0ft?file=/demo.tsx:1819-2045
- Instead of using a hardcoded variable called
names, I saved a fetched array as follows:
const { data, error } = useSWR(
"https://api.github.com/repos/vercel/swr",
fetcher
);
if (error) return <h1>"An error has occurred."</h1>;
if (!data) return <h1>"Loading..."</h1>;
const arr = data.topics;
This is how I rendered it:
{arr.map((tag,id)=> (
<MenuItem
key={id}
value={tag}
>
{tag}
</MenuItem>
))}
I encountered red underlines when hovering over the tag and id parameters, which prompted me to click on suggested Quick fixes. After applying the fixes, my code looked like this:
{arr.map((tag: {} | null | undefined,id: React.Key | null | undefined)=> (
<MenuItem
key={id}
value={tag}
>
{tag}
</MenuItem>
))}
The warning message I received from these changes mentioned issues with the 'value' property not being assignable among other things.
My question is, what exactly is the difference between mapping through a hardcoded array and an array fetched via useSRW? The hardcoded example did not generate any red underlines.
While the code does function properly, I am keen on understanding TypeScript better. Additionally, a warning in the console pointed out that there might be a discrepancy between controlled and uncontrolled input elements.