Return image from function React.JS

user_6372847 0
Viewed 374

So I'm trying to return an umbrella icon if it's raining outside but all I get is [object Object] Get an umbrella, it will rain today!, not the image.

My function is here:

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

And the line where I call the function:

<p className={classes.info}>{rain(props.responseObj.weather[0].description)}</p>

How could I return an image from a function in React?

reactjs
4 Answers

You are concatenating the jsx element with a String. Remove the + and wrap the img and the text inside React.Fragment(</>):

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

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>
       );
}
user_103006630

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.
user_97725610

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.

user_36057120
Related