FluentUI DetailsList - item state updated but component not rendered properly

Question

i have a button in my column to change the color of the Row , i have check the componentdidupdate and shouldupdatecomponent state are getting change but the change not reflected in the UI, when sorting or the color also getting change.

https://stackblitz.com/edit/stackblitz-starters-me1jug?description=React%20%20%20TypeScript%20starter%20project&file=src%2FApp.tsx,src%2Findex.tsx,src%2Fdatas.ts&title=React%20Starter

sample project in the above link.

onclick of the btn the color should change.

Answer 1

You have to track selected items inside state and to update list on onClick:

  ...
  const [datas, setDatas] = useState(data);
  const [selectedItems, setSelectedItems] = useState([]);

  const toggleCrossText = (item) => {
    const exists = selectedItems.some(
      x => x.transactionDate === item.transactionDate
    );
    if (exists) {
      // Remove item from selected items;
      setSelectedItems(
        selectedItems.filter(x => x.transactionDate !== item.transactionDate)
      );
    } else {
      // Mark new item as selected;
      setSelectedItems([...selectedItems, item]);
    }
  };

const columnsData: IColumn[] = [
  ...
  {
    key: 'lookup',
    name: '',
    fieldName: 'lookup',
    minWidth: 50,
    maxWidth: 50,
    onRender: (item: any, index: any) => (
      <CommandButton 
        style={{ color: isChecked(item) ? '#f00' : '#000' }}
        onClick={() => toggleCrossText(item)}
        text="Btn"
      />
    ),
  },
];

<DetailsList columns={columnsData} items={datas} />

And finally one function to check does item from original array exists as selected:

const isSelected = (item) =>
    selectedItems.some(x => item.transactionDate === x.transactionDate);

Forked working example.

Note: To style FluentUI Components use Styles property instead Style. More info here.