CODEWITHSUNDEEP
reactjs
Asking
Asking

Reputation: 4192

Hide element depending by a condition

I have an application, where depending by a condition i want to hide or to show data. So, i added the condition:

columnTitle:selectedRowKeys.length > 0? { selections: true }: { selections: false },

But the condition does not work. When i will click on a checkbox, i want to display selections, and when none of a checkbox is clicked, i want to hide the selections.

This is my code: https://codesandbox.io/s/custom-selection-ant-design-demo-mvy5j?file=/index.js:982-1017

How to solve the issue?

selections is this dropdown: enter image description here

Upvotes: 0

Views: 78

Answers (3)

Alan Paul Mathew
Alan Paul Mathew

Reputation: 219

I tried this and It is working

columnTitle:selectedRowKeys.length > 0 ? false : true,

The full rowSelection object would be

  const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
      columnTitle:selectedRowKeys.length > 0 ? false : true,
      hideDefaultSelections: true,
      selections: [
        Table.SELECTION_ALL,
        Table.SELECTION_INVERT,
        {
          key: "odd",
          text: "Select Odd Row",
          onSelect: changableRowKeys => {
            let newSelectedRowKeys = [];
            newSelectedRowKeys = changableRowKeys.filter((key, index) => {
              if (index % 2 !== 0) {
                return false;
              }
              return true;
            });
            this.setState({ selectedRowKeys: newSelectedRowKeys });
          }
        },
        {
          key: "even",
          text: "Select Even Row",
          onSelect: changableRowKeys => {
            let newSelectedRowKeys = [];
            newSelectedRowKeys = changableRowKeys.filter((key, index) => {
              if (index % 2 !== 0) {
                return true;
              }
              return false;
            });
            this.setState({ selectedRowKeys: newSelectedRowKeys });
          }
        }
      ]
    };

Try this

Upvotes: 1

kiranvj
kiranvj

Reputation: 34147

Your code should be like this (false should also work instead of null)

columnTitle: selectedRowKeys.length > 0 ? true : null,

You can also do like this (double NOT to make it boolean)

columnTitle: !!selectedRowKeys.length,

instead of (what you have now.)

columnTitle:{selections : selectedRowKeys.length > 0 ? true : false},

Check this - https://codesandbox.io/s/custom-selection-ant-design-demo-g1u4f

Upvotes: 1

Guruprasad
Guruprasad

Reputation: 783

Instead of this 

columnTitle:selectedRowKeys.length > 0? { selections: true }: { selections: false }

Try something like this 

 columnTitle:{selections : selectedRowKeys.length > 0 ? true : false}

Upvotes: 0

Related Questions