Return image from function React.JS

Try something like that:

function rain(x){
    if (x.includes("rain"))
        return
        (
        <div>
          <img src={Umbrella} alt="wind icon" style={{ width: 50, height: 50 }} />
          <p>Get an umbrella, it will rain today!</p>
        </div>
       );
}

You are returning an object and adding to it a string. Thats a no go. You have to return some sort of an object. You cant add, via +, a string to an object and expect it to become an proper HTML element. If you dont want to return the text inside a <div> or <p>, or any other container, you can do this:

return (<>
<img src={Umbrella} alt="wind icon" style={{ width: 50, height: 50 }} />
Get an umbrella, it will rain today!
</>)

NOTE <></> is an empty fragment. Since a return can only return 1 object, you put all your objects inside an empty fragment so it gets returned. This can also be achieved if you use <div></div> instead of <></> or any other container. The benifits of using an empty fragment is that you minimize the use of <div> elements, or other elementes, by not wrapping each thing in it.

ALSO just few recomendations:

• Use an arrow function () =>
• in render parts, use component functions instead of plain functions - easier to read.
• And, such as in your case, if you only want to render a specific part of thing with a condition, instead of returning based of the condition, do it in render because as of right now in your code, if the if statement goes to FALSE, it dosent returns so from a client side there is just an empty <p> element in the page.

There is a better way archive this by using Conditional Rendering:

{x.includes('rain') && (<>
             <img src={Umbrella} alt="wind icon" style={{ width: 50, height: 50 }} />
             Get an umbrella, it will rain today!
           </>)
}

Explanation:

It works because in JavaScript, true && expression always evaluates to expression, and false && expression always evaluates to false.

Therefore, if the condition is true, the element right after && will appear in the output. If it is false, React will ignore and skip it.

Note that returning a falsy expression will still cause the element after && to be skipped but will return the falsy expression. In the example below, 0 will be returned by the render method.