In React how do I use a conditional with rendering?

Question

I have a simple notification window, and as notifications are accepted/declined I remove the object from the notifications array.

This is my bit of code for handling displaying messages:

render: function() {
  return (
      <div className="chatwindowheight">
        <div className="row">
          <div className="large-12 columns">
            <div className="large-8 columns">
              <p className="thin partyHeader">Party <i className="fa fa-minus-square-o"></i></p>
            </div>

            <div className="large-4 columns">
              <i className="fa fa-users pull-right"></i>
            </div>
          </div>
        </div>
        <div className="row chatwindowheight">
          <div className="large-12 small-12 columns chatwindow" id="scrolldown">
          <br/>
            {
              this.state.messages.map((message, i) => {
                return (
                    <MessageComponent key={i}
                                      username={message.username}
                                      message={message.message}
                                      whos={message.classed} />
                  );
              })
            }
          </div>
        </div>
      <ChatSendComponent onChatSubmit={this.handleChatSubmit}/>
    </div>
  )
}

What I want is to have something like

if (this.state.messages.length === 0) {
  return (
    <p>You have no new notifications.</p>
  )    
}

but when I try to wrap something like that around the current loop, it tells me that if is an error. New to React so just trying to understand the best method for approaching this. Thanks!

Errorpro · Accepted Answer · 2015-11-04 07:10:12Z

1

There are some various resolve your problem: 1.

{ this.state.messages.length > 0 ?
  this.state.messages.map((message, i) => {
    return (
     <MessageComponent key={i}
       username={message.username}
       message={message.message}
       whos={message.classed} />
     );
 }) : 'You have messages'
}

Remove you map up to render function and prepare your data there: function render() { var message=''; if (this.state.messages.length) { } } <b>{message}</b>

edited Nov 4, 2015 at 7:10

answered Nov 4, 2015 at 7:02

Errorpro

2,4432 gold badges18 silver badges17 bronze badges

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

3 Comments

Datsik Over a year ago

Your first answer seems to work great, the only problem is, is it doesn't seem to be reactive, is there a way to make it switch back to the loop when a new notification gets put into the array? Hope I made sense.

Errorpro Over a year ago

When state is chages the component is renders. It's reactive. We use this way to define condition inside jsx. There is the other way to do it: tinyurl.com/ecma-do

Datsik Over a year ago

This was my mistake, it worked in the first example I simply had changed something earlier in the day and didn't realize it till now because I hadn't restarted the server so the server side changes hadn't taken effect. Thanks it works fantastic.

Collectives™ on Stack Overflow

In React how do I use a conditional with rendering?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related