Styling in React


#21

can you try to show us the pure function state this topic was only thought in class function


#22

None of the examples in this tutorial use component state, so its just a matter of making render your pure function and changing this.props to props where props is the first parameter of the function.

For example:

    class Letter extends React.Component {
        render() {
            var letterStyle = {
                padding: 10,
                margin: 10,
                backgroundColor: "#ffde00",
                color: "#333",
                display: "inline-block",
                fontFamily: "monospace",
                fontSize: 32,
                textAlign: "center"
            };
    
            return(
                <div style={letterStyle}>
                    {this.props.children}
                </div>
            );
        }
    }

would be

    function Letter (props) {
        var letterStyle = {
            padding: 10,
            margin: 10,
            backgroundColor: "#ffde00",
            color: "#333",
            display: "inline-block",
            fontFamily: "monospace",
            fontSize: 32,
            textAlign: "center"
        };

        return(
            <div style={letterStyle}>
                {props.children}
            </div>
        );
    }