Accepted answer

As i have explained already , you can approach this by two methods

  1. you can directly add a nullchecker on your component condition.

     isActive != null && !isActive  &&
       <div>show me</div>
  2. You can directly change the isActive variable.

    const isActive = props.row.original.isActive === false && 
                  props.row.original.isActive != null;

    and directly add it on the div as

    { isActive &&
       <div>show me</div>


If your case is to check when isActive is null and isActive is not false, then you can make the opposite condition (It's more stright forward and avoiding messing with the undefined/null mismatch):

  const isActive = (props.row.original.isActive === false && 
         props.row.original.isActive !== null);

Also modify the jsx code for: {isActive && <div> rest of your code }

You can read about the comparisons between undefined and null in MDN docs. for more details about the differences between null and undefined

Related Query

More Query from same tag