CODEWITHSUNDEEP
javascriptcssreactjsreact-bootstrapreact-bootstrap-table
clattenburg cake
clattenburg cake

Reputation: 1222

React Bootstrap Table: Inline Style to Change Background Color Based on Value

I have a problem that seems simple but I'm not sure how to get around it. Basically, I have a React Bootstrap Table that renders table data coming in from an API. What I would like to do is to change a row color to green if a specific value in the data is greater than zero... here is an example:

const TableComponent = ({ fixtures }) => {
    return (
        <Table>
            <tbody>
                {fixtures.map((fixture) => (
                    <tr
                        key={fixture.id}
                        style={{
                            backgroundColor: 'green'
                        }}
                    >
                        <td> {fixture.value1} </td>
                    </tr>
                ))}
            </tbody>
        </Table>
    );
};

So this defaults to a green backgroundColor for the row at all times. Is it possible to write a function so that, if fixture.value2 or fixture.value3 is greater than zero, the backgroundColor is green, but set to default otherwise?

Upvotes: 0

Views: 2745

Answers (1)

Kevin Shuguli
Kevin Shuguli

Reputation: 1749

It works for me. Try like this.

const TableComponent = ({ fixtures }) => {
    return (
        <Table>
            <tbody>
                {fixtures.map((fixture) => (
                    <tr
                        key={fixture.id}
                         style={fixture.value2>0|| fixture.value3>0?{backgroundColor:'green'}:{}}
                    >
                        <td> {fixture.value1} </td>
                    </tr>
                ))}
            </tbody>
        </Table>
    );
};

Upvotes: 1

Related Questions