[SOLVED] How to Control boolean field in react-bootstrap-table-next

How to Control boolean field in react-bootstrap-table-next

Suppose in an API I have a boolean value eg. mission_status: true, or mission_status: false. And I use react-bootstrap-table2 to create table. Since it copies whatever data is there in the array of object into a table row.
I want to display "Success" in the Table if the mission_status is true and "Failure" if mission_status is false. Right now it only displays true and false.

const columns = [
    { dataField:"flight_number", text:"No." };
    { dataField:"mission_name", text:"Mission" },
    { dataField:"mission_status", text:"Mission Status" },
    { dataField:"rocket.rocket_name", text:"Rocket" }
]

And this is the jsx part :

<BootstrapTable 
            keyField="flight_number"
            data={launch}
            columns={columns}
            pagination={paginationFactory()}

        />

I want mission Status as "Success" if it is true in the table and vice-versa.
How to achieve it Please help??

Solution

You can use formatter to achieve that

// Add formatter properties to the cell
const columns = [
    ...,
    { 
        dataField:"mission_status", 
        text:"Mission Status", 
        formatter: statusFormatter 
    },
    ...
]

// Process the returned data in the formatter
function statusFormatter(cell, row, rowIndex, formatExtraData) {
    return cell ? 'Success' : 'Failure'
}

formatter will have 4 arguments available. cell is the data passed to the formatter, and row is the whole data object for that row.