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.

more code less css what did you try

Omar K
– Omar K

2018-03-20 18:11:56 +00:00
Commented Mar 20, 2018 at 18:11 — Omar K
– Omar K, Commented Mar 20, 2018 at 18:11

Chase DeAnda · Accepted Answer · 2018-03-20 18:15:40Z

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;
}));

answered Mar 20, 2018 at 18:15

Chase DeAnda

16.5k3 gold badges34 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Modifying row data using classes in React Bootstrap Table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related