reject:inline_style [Tutorial Site]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.

====== 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.

<code>
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;

</code>