How to display a specific component icon based off of props data using a switch case?

Question

I am very new to React and am self-taught. I am creating a basic app that uses weatherapi.com to display the current moon phase and information. This API only gives you the name of the moon phase but not the icon. So my plan was to import icons from https://react-icons.github.io/react-icons/ and display the current phase icon based off of the data received from the props. I was told that creating a variable for each icon then pulling the data, running a conditional or switch case, then replacing the icon variable in my html snippet was the best way to do this. After trying multiple times and doing research I'm not quite understanding how to do this since its my first time learning about switch cases or even using one. Here is the link to my github (I'm aware what's currently displayed is incorrect this is just to show what components are being used & the overall project): https://github.com/madisonmincevich/react-moon-app/blob/master/src/MoonIcon.js

Answer 1

There are some different ways to do it but I tried to solve it with your method.

Just created a new array, named mapping and it has 2 objects that you can see with name and component keys. takeComponent function checks the data that comes from props.

Then you can create a new object and assigned the found object to it ( lastObj), and its component key is equal to the element that you want to use with react-icons-wi

You can check the code below, hope this helps.