Dynamic Inline Styling

It is possible that we dynamically change the CSS with inline styling. As we know that the styling is just an JavaScript object, we can change it before we render it. Here is a dumb example that change style.cursor = “pointer”;.

Ideally the if condition could be related to property of the props or state.

    let style = {
        borderWidth: '1px',
        borderStyle: 'solid',
        cursor: 'default'
    };
    let bUsingCursorPointer = true;
    if (bUsingCursorPointer) {
        style.cursor = "pointer";
    }

Full code:

const ItemComponent = (prop) => {
    let style = {
        borderWidth: '1px',
        borderStyle: 'solid',
        cursor: 'default'
    };
    let bUsingCursorPointer = true;
    if (bUsingCursorPointer) {
        style.cursor = "pointer";
    }
    return (
        <div>
            <span style={style}
                  key={prop.index}
                  onClick={prop.clickHandler}>
                name: {prop.name}, price: ${prop.price}, key: {prop.index}</span>
        </div>
    );
};