Inline style

The basic idea is to setup a JavaScript object either with let or const, and then apply it inside the tag with style={…}. It is import to note that we are using sudo DOM, and the style property names are changed from kebab-case (using hyphen-separated) to camelCase (using big letter to separated with the first letter begin a small letter.).

The following example shows how to setup an object an than apply to the span, or doing it directly inside the div.

import React from "react";

const ItemComponent = (prop) => {
    const style = {
        borderWidth: '1px',
        borderStyle: 'solid',
        cursor: 'default'
    };

    return (
        <div style={{padding: '5px'}}>
            <span style={style}
                  key={prop.index}
                  onClick={prop.clickHandler}>
                name: {prop.name}, price: ${prop.price}, key: {prop.index}</span>
        </div>
    );
};

export default ItemComponent;