# Styling in React

**URL:** <https://forum.kirupa.com/t/styling-in-react/636204>\
**Category:** programming\
**Created:** [March 20, 2017, 1:52am UTC](https://forum.kirupa.com/t/styling-in-react/636204 "2017-03-20T01:52:45Z")\
**Posts on this page:** 4\
**Page:** 2

<div class="post-metadata">

**Author:** ![sesan](https://avatars.discourse-cdn.com/v4/letter/s/0ea827/32.png) [@sesan](https://forum.kirupa.com/u/sesan)\
**Post date:** [February 6, 2018, 3:26pm UTC](https://forum.kirupa.com/t/styling-in-react/636204/21 "2018-02-06T15:26:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [February 6, 2018, 4:05pm UTC](https://forum.kirupa.com/t/styling-in-react/636204/22 "2018-02-06T16:05:37Z")

</div>

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:

```auto
    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

```auto
    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>
        );
    }

```

---

<div class="post-metadata">

**Author:** ![sagarmainkar](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sagarmainkar/32/10274_2.png) [@sagarmainkar](https://forum.kirupa.com/u/sagarmainkar)\
**Post date:** [October 22, 2019, 9:16am UTC](https://forum.kirupa.com/t/styling-in-react/636204/23 "2019-10-22T09:16:16Z")

</div>

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`

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [October 22, 2019, 3:25pm UTC](https://forum.kirupa.com/t/styling-in-react/636204/24 "2019-10-22T15:25:35Z")

</div>

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](https://www.kirupa.com/react/errata.htm)

Cheers,  
Kirupa 🕶

[Previous page](https://forum.kirupa.com/t/styling-in-react/636204.md?page=1)