How to correctly use switch statement in JSX (react)? [closed]

Solution 1:

Inside your component function, you should declare and manipulate a variable like below (of course switch statement can also be used to achieve below):

 let weatherImg = "";
    // and conditionally update it as required like below -
    if(weatherToday == rain) {
    weatherImg = "whatever image name you imported from image path"
    } else if (condition 2) {
    weatherImg = "path 2"
    } else if (condition 3) {
    weatherImg = "path 3"
    } else {
    weatherImg = "whatever default image you want to show"
    }

Then you pass the value of weatherImg variable to src attribute in image tag.

 <img src={weatherImg}></img>

An advantage of writing this way is, someone reading this code can take a quick glance at it, as it will be at the top of your JSX code and determine the conditions that are causing the image to change. So in future if any change is needed it is easy to make unlike the case that you have shown which frankly speaking I haven't tried and it looks harder to read and has mistakes as pointed in comments section.