react-bootstrap-table: Column formatter is not re-rendering

Question

I have the following column formatter:

// const [shouldShowCancel, setShouldShowCancel] = useState(false);
  function nameColumnFormatter(cell, row) {
    var shouldShowCancel = false;
    return (
      <div
        className="row"
        onMouseEnter={() => {
          shouldShowCancel = true;
          // console.log(`Inside row and cancel is ${shouldShowCancel}`);
        }}
        onMouseLeave={() => {
          shouldShowCancel = false;
          // console.log(`Inside row and cancel is ${shouldShowCancel}`);
        }}
      >
        <div className="col-10">{cell}</div>

        {/* {shouldShowCancel && (
          <div className="col-2">
            <img
              src="cancel.png"
              style={{ maxWidth: 20, cursor: "pointer" }}
            ></img>
          </div>
        )} */}
        <div className="col-2">
          <img
            src="cancel.png"
            style={{
              maxWidth: 20,
              cursor: "pointer",
              display: getDisplay(shouldShowCancel),
            }}
          ></img>
        </div>
      </div>
    );
  }

  function getDisplay(shouldShowCancel) {
    console.log(`Inside row and cancel is ${shouldShowCancel}`);
    return shouldShowCancel ? "block" : "none";
  }

What I am trying to do it to toggle the visibility of a cancel button while hovering over the cell. I initially tried to do it using the state but this is not working since the value is changed asynchronously. Then I tried to do it with a local variable inside the renderer but although I can see that the shouldShowCancel is changed, the image is never show. The commented out parts is the different things I've tried:

1. Using

{shouldShowCancel && (
          <div className="col-2">
            <img
              src="cancel.png"
              style={{ maxWidth: 20, cursor: "pointer" }}
            ></img>
          </div>
        )}

and trying to toggle visibility with either the state or the local variable

2. Using

<div className="col-2">
          <img
            src="cancel.png"
            style={{
              maxWidth: 20,
              cursor: "pointer",
              display: getDisplay(shouldShowCancel),
            }}
          ></img>
        </div>

and trying to toggle visibility with either the state or the local variable

Nothing has worked so far. What is the right way to about this?

For the sake of completion and the column formatted is used like

const tableColumns = [
    {
      dataField: "name",
      text: "Name",
      sort: true,
      formatter: nameColumnFormatter,
    },
...
]

Answer 1

I solved this be creating a new component:

import { default as React, useState } from "react";

export default function NameCell(props) {
  const [shouldShowCancel, setShouldShowCancel] = useState(false);
  return (
    <div
      className="row"
      onMouseEnter={() => {
        setShouldShowCancel(true);
        // console.log(`Inside row and cancel is ${shouldShowCancel}`);
      }}
      onMouseLeave={() => {
        setShouldShowCancel(false);
        // console.log(`Inside row and cancel is ${shouldShowCancel}`);
      }}
    >
      <div className="col-10">{props.cell}</div>

      {shouldShowCancel && (
        <div className="col-2">
          <img
            src="cancel.png"
            style={{ maxWidth: 20, cursor: "pointer" }}
          ></img>
        </div>
      )}
    </div>
  );
}

and using it in the formatter like:

  function nameColumnFormatter(cell, row) {
    return <NameCell cell={cell}></NameCell>;
  }

Hope this helps. I do not know why the rendering is not working with react-bootstrap-tables-2