Styling in React

programming
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>
        );
    }
1 Like
23

There is a problem in the code
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>
        {this.props.children}
      </div>
    );
  }
}

It is missing this

<div style={letterStyle}> in the book

24

Unfortunately, that is a mistake that slipped through. You can see this and other errors called out here: https://www.kirupa.com/react/errata.htm

Cheers,
Kirupa :sunglasses: