React: conditional statement in render function

Question

I have an array of objects with different artists. I want to show different content based on whether or not an image is in the individual object.

I have tried to put an if/else statement in my render method, but of course this is not working. Please see my code below.

render: function() {
    var cardList = this.props.artists.map(function(artist, index){
        return(
          <li key={index} className='card'>
            <span>  
                {if artist.image}
                   <img src="{artist.image}">
                {else}
                <p>{artist.message}</p>
                  <p>LIKES <i className="fa fa-heart" aria-hidden="true"></i> {artist.likeCount }</p>
              </span>
          </li>
        )
    })
    return (
      <div className='tickerwrapper'>
        <ul className='list'>{cardList}</ul>
      </div>
    )
  }

Mark Williams · Accepted Answer · 2016-11-30 15:35:50Z

1

You can inline something along the lines of:

{ myVal === true ? <div>True</div> : <div>False</div> }

If, for example you only want something rendered if myVal is true you can do return null if it's false:

 { myVal === true ? <div>True</div> : null }

If the logic is quite large just extract it into a function and call that from within your render:

renderSalutation() {
  return (userLoggedOn ? <h3>Hello!</h3> : null);
}

render() {
  return (
    <div>
      { this.renderSalutation() }

      ------other renderings here

    </div>  
  );
}

edited Nov 30, 2016 at 15:35

answered Nov 30, 2016 at 15:30

Mark Williams

2,3081 gold badge14 silver badges15 bronze badges

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

3 Comments

TimoStaudinger Over a year ago

Note that myVal === true can be abbreviated to a simple myVal.

Mark Williams Over a year ago

Of course - left it like this for clarity as myVal is (hopefully obviously) made up.

Cithel Over a year ago

I'm not sure how good of a practice it is, but sometimes I use the fact that render is a function to prepare pieces of view conditionnally as variables in its body, and then concat them in the return statement. THat way I avoid creating a function if its not goin gto be reused.

TimoStaudinger · Accepted Answer · 2016-11-30 15:31:30Z

0

You need to use a valid expression in your JSX code. an if-else-statement is not, however you can use a ternary operator:

var cardList = this.props.artists.map(function(artist, index) {
    return(
        <li key={index} className='card'>
            <span>  
                {artist.image ? (
                    <img src="{artist.image}">
                ) : (
                    <p>{artist.message}</p>
                    <p>LIKES <i className="fa fa-heart" aria-hidden="true"></i> {artist.likeCount}</p>
                )}
            </span>
        </li>
    )
})

You can find more info on conditional rendering in the react docs.

edited Nov 30, 2016 at 15:31

answered Nov 30, 2016 at 15:29

TimoStaudinger

42.7k16 gold badges91 silver badges96 bronze badges

2 Comments

user6002037 Over a year ago

can it be done elsewhere with an if/else statement also?

TimoStaudinger Over a year ago

You could of course, e.g.: if(artist.image) { return (...) } else { return (...)}. Just make sure you keep the if-else-statement out of the JSX code. Often enough you loose some readability in the process, though.

kjonsson · Accepted Answer · 2016-11-30 15:40:00Z

0

It can be done with if/else. As shown on React site:

function NumberDescriber(props) {
  let description;

  if (props.number % 2 == 0) {
    description = <strong>even</strong>;
  } else {
    description = <i>odd</i>;
  }
  return <div>{props.number} is an {description} number</div>;
}

Just do something similar in your render function. Conditionally set a value to a component you want and then render it within {}.

answered Nov 30, 2016 at 15:40

kjonsson

2,7972 gold badges17 silver badges23 bronze badges

Collectives™ on Stack Overflow

React: conditional statement in render function

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related