How to get DetailsList/Selection component on React Fabric UI to work with ReactHooks?

Question

I'm having issue getting the React Fabric UI DetailsList to work with React Hooks. It renders, but the selection part does not. Whenever, you select a row, I expect the count of the selection to be updated. However, i'm not seeing that. It looks like the selection component items never get updated even thou the UI shows it being selected. I'm also seeing the onSelectionChange being triggered when you select a row. Now sure if its because i'm using react hooks or what

I took the provided class example which works:

[Codepen]https://codepen.io/pen/?&editable=true (Example)

Same as the original but stripped down

[Codepen]https://codepen.io/darewreckk/pen/NQRWEd?editors=1111

converted it to a react hook component. I would expect the same thing, but i'm not and can't figure out what's different.

Modified Example with Hooks

[Codepen]https://codepen.io/darewreckk/pen/GVjRNb?editors=1111

Any advice appreciated, Thanks, Derek

mtl mtl · Accepted Answer · 2019-07-25T16:40:51

The selection count is stored on the Selection object that you are creating. You could log it out like so:

  const _selection = new Selection({
      onSelectionChanged: () => { 
        console.log('Selected count:' + _selection.count);
      }
  });

You can set the value of selectionCount and selectionDetails whenever onSelectionChanged is called:

  const _selection = new Selection({
      onSelectionChanged: () => { 
        setSelectionCount(_selection.count);
        setSelectionDetails(`${_selection.count} items selected`)
      }
  });

As a side note: If you want selectionDetails to update when selectionCount updates, you can use the useEffect hook:

  React.useEffect(() => {
    setSelectionDetails(`${selectionCount} items selected`);
  }, [selectionCount]);

The above effect will run whenever selectionCount updates, and so in turn update selectionDetails.

How to get DetailsList/Selection component on React Fabric UI to work with ReactHooks?

1 Answers