How to display an element based on a condition using react and typescript?

user_17892783 0
Viewed 1198

i want to display div element based on certain condition got from the table data using react table and typescript

code

const buildColumns: (mode: someMode,) => (mode) => [
    {
       Header: 'Name',
       id: 'name',
       Cell: props => {
           const isActive = props.row.original.isActive === true 
                         || props.row.original.isActive === null;
       return (
           {!isActive &&
              <div>show me</div>
           });
      }
]

Now if isActive is not null and if isActive is false i should display div element. how could i do it.

the above condition displays it even if isActive is null. could someone help me with this. thanks.

typescript reactjs
2 Answers

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>
});
user_84572550

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 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null

user_144764160
Related