Ternary operators in react JS

Question

Need some guidance on ternary operators in react js.

If dataCheck is true, my icon FaSitemap will appear. If it is false, the icon does not appear

However, if it returns an empty response, how do i ensure that the icon does not appear as well? Currently it will appear even if the response is empty even though i return null at the end.

      {
          (dataCheck) ? (
              <span>
                <FaSitemap
                  size="2.5em"
                  color="#1E88E5"
                  cursor="pointer"
                />
              </span>
          ) : (null)
       }

What do you exactly mean by returning an empty response? Because technically your ternary operator syntax and logic is correct. Unless the dataCheck object is a string, not a boolean. I am also assuming you have this ternary wrapped in { } — arnelisk
– arnelisk, Commented Jun 10, 2021 at 12:57
[] and {} and ' ' are true even though they empty, want to know more go github.com/denysdovhan/wtfjs — Josh Lin
– Josh Lin, Commented Jun 11, 2021 at 3:21

DecPK · Accepted Answer · 2021-06-11 02:16:58Z

1

You can just use logical && which means first it will check for dataCheck, if it is a truthy value then the icon will show else not.

{
  dataCheck && dataCheck.length !== 0 && (
    <span>
      <FaSitemap size="2.5em" color="#1E88E5" cursor="pointer" />
    </span>
  );
}

edited Jun 11, 2021 at 2:16

answered Jun 10, 2021 at 12:52

DecPK

25.4k6 gold badges32 silver badges46 bronze badges

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

3 Comments

user8779054 Over a year ago

Thanks for sharing this good tip! How about if the value returned is [], but seems like it will recognize it as truthy.

GanHJ Over a year ago

@user8779054 In that case, you can check the length of your array. Only show it when it's not 0. For example: {array.length !== 0 && (RENDER YOUR ITEM HERE)}

DecPK Over a year ago

@user8779054 Answer edited. You just need to add one more condition dataCheck.length !== 0

Collectives™ on Stack Overflow

Ternary operators in react JS

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