Ternary expression does not update the jsx template - reactjs

Question

I'm using react-bootstrap-table-2 to build a table where I want the user to be able to change columns in a modal UI.
When a column is removed by the user the change should not take effect until the modal is closed, so until then I want the UI to reflect that the column will be removed by a strike-through of the row. So I have a ternary expression on col.deleted that shows the text with strike through if true.
I map over the columns array to create new rows for each column, and a button to remove the column that gets the index of the column.
<tbody>
{columns.map((col: any, i: number) => (
<tr key={i}>
<td>{col.deleted ? <del>{col.text}</del> : col.text}</td>
<td className="w-20">
<div className="flex flex-row justify-center">
<Button
variant="danger"
onClick={() => {
col.deleted = !col.deleted;
setColumns(columns);
}}
>
<FaTrash />
</Button>
</div>
</td>
</tr>
))}
</tbody>
I set columns[i].deleted to true with the button but nothing gets updated in the UI. Have I misunderstood something?
Check this sandbox for the full example: https://codesandbox.io/s/silly-wilbur-q3ytt

Answer 1

Likely the issue is that you are mutating the state. Try let newColums = [...columns]; and then perform the same things but on newColumns not columns, and set newColumns in setState
I had same issue recently with a simper example and it came down to that I was mutating the state and thus the component setState was not updating the component
EDIT example
// Your onClick function
(i) => {
let newColumns = [...columns];
newColumns[i].deleted = !newColumns[i].deleted;
setState(newColumns);
}
Your function should look somewhat like this just adjust the code in case I made typo
Sandbox tested
import React, { useState } from "react";
import Button from "react-bootstrap/Button";
import Modal from "react-bootstrap/Modal";
import Table from "react-bootstrap/Table";
// #ts-ignore
import cellEditFactory from "react-bootstrap-table2-editor";
// #ts-ignore
import BootstrapTable from "react-bootstrap-table-next";
import { FaTrash, FaEdit, FaPlus } from "react-icons/fa";
import { rows, columns as cols } from "./data";
import "react-bootstrap-table-next/dist/react-bootstrap-table2.min.css";
import "bootstrap/dist/css/bootstrap.min.css";
export interface ColumnItem {
dataField: string;
text: string;
deleted: boolean;
}
const EditTableModal = (props: any) => {
const [columns, setColumns] = useState<ColumnItem[]>(
props.columns.map((col: any) => {
col.deleted = false;
return col;
})
);
const handleClick = i => {
let newColumns = [];
columns.forEach(column => newColumns.push(Object.assign({}, column)));
console.log(newColumns);
console.log(i);
newColumns[i].deleted = !newColumns[i].deleted;
console.log(newColumns[i].deleted);
setColumns(newColumns);
};
return (
<Modal
{...props}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
<div className="flex flex-row items-center">
<FaEdit className="mr-2" /> Edit columns
</div>
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Table striped bordered hover size="sm" className="mb-0">
<tbody>
{columns.map((col: any, i: number) => (
<tr key={i}>
<td>{col.deleted ? <del>{col.text}</del> : col.text}</td>
<td className="w-20">
<div className="flex flex-row justify-center">
<Button variant="danger" onClick={() => handleClick(i)}>
<FaTrash />
</Button>
</div>
</td>
</tr>
))}
<tr>
<td>
<div>
<Button variant="dark">
<FaPlus />
</Button>
</div>
</td>
<td className="w-20" />
</tr>
</tbody>
</Table>
</Modal.Body>
<Modal.Footer>
<Button variant="dark" onClick={props.onHide}>
Save
</Button>
<Button variant="light" onClick={props.onHide}>
Close
</Button>
</Modal.Footer>
</Modal>
);
};
const ComponentList = () => {
const [columns] = useState<ColumnItem[]>(cols);
const [data] = useState<any[]>(rows);
const [modalShow, setModalShow] = useState(false);
return (
<div className="flex flex-col items-center m-3">
{data.length > 0 ? (
<div className="flex flex-col items-center">
<div className="flex flex-row m-2">
<Button
variant="dark"
onClick={() => setModalShow(true)}
className="ml-1"
>
<div className="flex flex-row items-center">
<FaEdit className="mr-2" /> Edit table
</div>
</Button>
<EditTableModal
show={modalShow}
onHide={() => setModalShow(false)}
backdrop={"static"}
columns={columns}
/>
</div>
<BootstrapTable
keyField="idInternal"
data={data}
columns={columns}
cellEdit={cellEditFactory({
mode: "click",
blurToSave: true,
autoSelectText: true
})}
/>
</div>
) : (
<div className="font-mono text-sm">No data in table</div>
)}
</div>
);
};
export default ComponentList;