Modifying row data using classes in React Bootstrap Table

Question

I am using react-bootstrap-table-next to display my data.

Here is the data I am trying to display.

[
    {
        color: "red",
        value: "#f00",
        status: "Success"
    },
    {
        color: "green",
        value: "#0f0",
        status: "Success"
    },
    {
        color: "blue",
        value: "#00f",
        status: "Failed"
    },
    {
        color: "cyan",
        value: "#0ff",
        status: "Failed"
    },
    {
        color: "magenta",
        value: "#f0f",
        status: "Success"
    },
    {
        color: "yellow",
        value: "#ff0",
        status: "Failed"
    },
    {
        color: "black",
        value: "#000",
        status: "Success"
    }
]

If the status is failed, I want to add the class "glyphicon-remove-sign" and if suucess, use this glyphicon-ok-sign.

How do I go about modifying the data and also the classes? Right now it displays the text but I want the symbol.

Thanks.

Answer 1

You can map over your data array and conditionally add the class to each object:

const data = [
    {
        color: "red",
        value: "#f00",
        status: "Success"
    },
    {
        color: "green",
        value: "#0f0",
        status: "Success"
    },
    {
        color: "blue",
        value: "#00f",
        status: "Failed"
    },
    {
        color: "cyan",
        value: "#0ff",
        status: "Failed"
    },
    {
        color: "magenta",
        value: "#f0f",
        status: "Success"
    },
    {
        color: "yellow",
        value: "#ff0",
        status: "Failed"
    },
    {
        color: "black",
        value: "#000",
        status: "Success"
    }
];

console.log(data.map( d => {
  d.class = d.status.toLowerCase() === 'failed' ? 'glyphicon-remove-sign' : 'glyphicon-ok-sign';
  return d;
}));