How to add logical if statement when rendering React components?

Question

if I have code that looks like this...

var Lounge = React.createClass({displayName: "Lounge",
  render: function() {
    return (
            React.createElement("a", {href:"/lounge/detail/" + this.props.id +  "/"},
            React.createElement("div", {className: "lounge"},
            React.createElement("h2", {className: "loungeAuthor"},
              this.props.author.name
            ),
            React.createElement("p", {className: "loungeArticle"},
              this.props.article
            ),
            React.createElement("img", {className: "loungeImage", src: this.props.image})
          )
        )
    );
  }
});

I need to do a logical if check to only render the "img" component if the image data exists. Does anybody know the best way to go about this using React?

Jonny Buchanan · Accepted Answer · 2015-06-30 11:56:07Z

39

If you want to do it inline, you can do:

{this.props.image && <img className="loungeImage" src={this.props.image}/>}

this.props.image && React.createElement("img", {className: "loungeImage", src: this.props.image})

If the value you want to check is falsy but would result in something being rendered by React, like an empty string, you might want to convert it to its boolean equivalent in the check by using !!:

{!!this.props.image && <img className="loungeImage" src={this.props.image}/>}

!!this.props.image && React.createElement("img", {className: "loungeImage", src: this.props.image})

edited Jun 30, 2015 at 11:56

answered Feb 1, 2015 at 9:13

Jonny Buchanan

62.9k17 gold badges147 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Robin Wieruch Over a year ago

Perhaps a good read about the whole conditional rendering topic.

Konstantin Tarkus · Accepted Answer · 2017-09-28 08:13:53Z

10

Keeping this logic inline as well as using JSX may help with readability

import React from 'react';
import PropTypes from 'prop-types';
import s from './Lounge.css'; // See CSS Modules

// Stateless functional component (since there is no state)
function Lounge({ id, article, author, imageUrl }) {
  return (
    <a href={`/lounge/detail/${id}/`}>
      <span className={s.lounge}>
        <span className={s.author}>{author.name}</span>
        <span className={s.article}>{article}</span>
        {imageUrl && <img className={s.image} src={imageUrl} />} // <==
      </span>
    </a>
  );
}

// Props validation
Lounge.propTypes = {
  id: PropTypes.number.isRequired,
  article: PropTypes.string.isRequired,
  imageUrl: PropTypes.string,
  author: PropTypes.shape({
    name: PropTypes.string.isRequired
  }).isRequired
};

export default Lounge;

edited Sep 28, 2017 at 8:13

answered Feb 3, 2015 at 6:28

Konstantin Tarkus

38.6k14 gold badges137 silver badges123 bronze badges

2 Comments

Chris Hawkes Over a year ago

for some reason I just don't like JSX. It just seems like an unnecessary step. I suppose it's the same reason why I'm not interested in CoffeeScript or TypeScript either.

Konstantin Tarkus Over a year ago

at least you can use conditional statements inside your render() method's code to get all the HTML elements visually structured

Chris Hawkes · Accepted Answer · 2015-02-01 01:43:09Z

Okay so this may be clear to a lot of people, for some reason I didn't see it, then again I'm quickly scanning through the documents and I'm not using JSX (really don't like it)

Therefore the JavaScript way of adding logical if checks when rendering react components would be done like this. (keep in mind undefined works just fine, so assuming the if statement is not hit it will still render just fine)

var Lounge = React.createClass({displayName: "Lounge",
  render: function() {
    if (this.props.image != "") {
       var imageElement = React.createElement("img", {className: "loungeImage", src: this.props.image});
    }
    return (
            React.createElement("a", {href:"/lounge/detail/" + this.props.id +  "/"},
            React.createElement("div", {className: "lounge"},
            React.createElement("h2", {className: "loungeAuthor"},
              this.props.author.name
            ),
            React.createElement("p", {className: "loungeArticle"},
              this.props.article
            ),
            imageElement
          )
        )
    );
  }
});

Gordon Freeman · Accepted Answer · 2016-01-08 23:14:05Z

2

You can use React if component:

var Node = require('react-if-comp');

var Lounge = React.createClass({
    displayName: 'Lounge',
    render: function() {
        return (
            <a href={'/lounge/detail/' + this.props.id + '/'}>
                <div className='lounge'>
                    <h2 className='loungeAuthor'>{author.name}</h2>
                    <p className='loungeArticle'>{article}</p>
                    <Node if={this.props.image}
                        then={<img className='loungeImage'
                        src={this.props.image} />} />
                </div>
            </a>
        );
    }
});

edited Jan 8, 2016 at 23:14

answered Jan 8, 2016 at 22:56

Gordon Freeman

9118 silver badges5 bronze badges

Comments

jsdario · Accepted Answer · 2016-12-12 16:57:28Z

2

Using JSX + IIFE (Immediately-Invoked function) can come pretty handy and explicit:

{(() => {
  if (isEmpty(routine.queries)) {
    return <Grid devices={devices} routine={routine} configure={() => this.setState({configured: true})}/>
  } else if (this.state.configured) {
    return <DeviceList devices={devices} routine={routine} configure={() => this.setState({configured: false})}/>
  } else {
    return <Grid devices={devices} routine={routine} configure={() => this.setState({configured: true})}/>
  }
})()}

answered Dec 12, 2016 at 16:57

jsdario

6,89311 gold badges45 silver badges78 bronze badges

Collectives™ on Stack Overflow

How to add logical if statement when rendering React components?

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related