React-table accessor how pass conditionally prop?

Question

I wonder how I can pass to prop conditionally to my react-table accessor.

eg: I have a data like this:

const data = [
  {
    name: 'Something',
    isA: false,
    isB: false,
    isC: true
  },
  {
    name: 'Something 2',
    isA: true,
    isB: false,
    isC: false
  },
  {
    name: 'Something 3',
    isA: false,
    isB: false,
    isC: true
  },
];

and my two columns:

const columns = [
  { Header: 'Name', accessor: 'name' }, 
  { Header: 'Is What?', accessor:'?' },  
];

Here is in second column accessor how will work like that?
accessor will be that which one of isA, or isB, or isC true, so if isA true accessor will be isA, if isB accessor will be isB ....

How to know it?

React table accessor has another format which takes a function instead of a string.. accessor: data => data.isA || data.isB || data.isC — Karan Garg

Orlyyn Orlyyn · Accepted Answer · 2019-07-08T09:48:06

In your Is What ? accessor, in order to know which data to show, you can have the accessor like this :

{
  Header: "Is What?",
  accessor: a => (a.isA ? "isA" : a.isB ? "isB" : a.isC ? "isC" : "")
}

Here, if isA is true, you'll see isA in your Cell value. However, if isA is false and isB is true, you'll see isB in your Cell value etc.

React-table accessor how pass conditionally prop?

1 Answers