"or" operator not working as expected in render method of react

Question

I am trying to use "or" || operator in my render method of react like this (aim is to decide whether or not to show element)

<div className="item-actions">
    {this.state.addedMovieTag.filter(function( obj ) {
        return obj.trivia_id === item.id;
    }).length > 0 || this.state.addedPersonTag.filter(function( obj ) {
        return obj.trivia_id === item.id;
    }).length > 0  &&  <span className="fa fa-edit" onClick={this.saveChanges.bind(this, item)}></span>}
    <span className="fa fa-trash"></span>
</div>

now consider following scenarios (aim is to decide whether or not to show )

scenario 1: (span not shown)

this.state.addedMovieTag.filter(function( obj ) {
    return obj.trivia_id === item.id;
}).length === 0 
this.state.addedPersonTag.filter(function( obj ) {
    return obj.trivia_id === item.id;
}).length === 0

scenario 2: (span shows - expected behaviour)

this.state.addedMovieTag.filter(function( obj ) {
    return obj.trivia_id === item.id;
}).length === 1 
this.state.addedPersonTag.filter(function( obj ) {
    return obj.trivia_id === item.id;
}).length === 0

scenario 3: (span shows - expected behaviour)

this.state.addedMovieTag.filter(function( obj ) {
    return obj.trivia_id === item.id;
}).length === 2
this.state.addedPersonTag.filter(function( obj ) {
    return obj.trivia_id === item.id;
}).length === 0

scenario 4: (span not shows up - UNEXPECTED behaviour)

this.state.addedMovieTag.filter(function( obj ) {
    return obj.trivia_id === item.id;
}).length === 2
this.state.addedPersonTag.filter(function( obj ) {
    return obj.trivia_id === item.id;
}).length === 1

Your expression is: a || b || c && d. So is d associated with c? Yes. So if a or b is true, it will return true. but if c is false, it will not render d. Only case when d is rendered is if a and b is false and c is true. Try (a || b || c) && d instead — Rajesh Dixit
– Rajesh Dixit, Commented Apr 19, 2018 at 10:23
Possibly some logical operator precedence fault where a || b && c is different from (a || b) && c (being the latter what you desire)? Also, I would recommend moving that logic out from the view and assign it to a variable so it leaves the view to rendering only with an easy-to-read simple logic e.g. {hasContentToDisplay && <span ...>} — mathielo
– mathielo, Commented Apr 19, 2018 at 10:25
A bit unrelated, but you may want to consider using the .some() function if you're checking for length > 0 after a filter(). — Delapouite
– Delapouite, Commented Apr 19, 2018 at 10:27

Dipesh Wagle · Accepted Answer · 2018-04-19 10:54:02Z

1

As logical expressions are evaluated left to right, they are tested for possible "short-circuit" evaluation using the following rules:

false && (anything) is short-circuit evaluated to false.

true || (anything) is short-circuit evaluated to true.

So you should wrap all conditions into bracket and use ||

<div className="item-actions">
    { (this.state.addedMovieTag.filter(function( obj ) {
        return obj.trivia_id === item.id;
    }).length > 0 || this.state.addedPersonTag.filter(function( obj ) {
        return obj.trivia_id === item.id;
    }).length > 0 ) &&  <span className="fa fa-edit" onClick={this.saveChanges.bind(this, item)}></span>}
    <span className="fa fa-trash"></span>
</div>

answered Apr 19, 2018 at 10:54

Dipesh Wagle

2702 silver badges4 bronze badges

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

Comments

Ciamas · Accepted Answer · 2018-04-19 10:38:07Z

0

I think this has to do with the short circuit evaluation ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Logical ) and could be simply fixed by placing the OR check in brackets.

You could try typing in browser console:

true || true && false //will return true
(true || true) && false //will return false

answered Apr 19, 2018 at 10:38

Ciamas

412 silver badges7 bronze badges

Collectives™ on Stack Overflow

"or" operator not working as expected in render method of react

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related