# Why don't work letterStyle ?

**URL:** <https://forum.kirupa.com/t/why-dont-work-letterstyle/644182>\
**Category:** web dev\
**Created:** [September 14, 2020, 5:08pm UTC](https://forum.kirupa.com/t/why-dont-work-letterstyle/644182 "2020-09-14T17:08:18Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![reexel](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/reexel/32/12455_2.png) [@reexel](https://forum.kirupa.com/u/reexel)\
**Post date:** [September 14, 2020, 5:08pm UTC](https://forum.kirupa.com/t/why-dont-work-letterstyle/644182/1 "2020-09-14T17:08:18Z")

</div>

Hello, all! I read book from Kirupa.  
It contains this code:

```
<! DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <style>
      #container {
        padding: 50px;
        background-color: #FFF;
      }
    </style>
  </head>
  <body>
  <div id="container"></div>
  <script type="text/babel">
    var destination = document.querySelector("#container");
    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>
      );
      }
    }
    ReactDOM.render(
      <div>
        <Letter>G</Letter>
        <Letter>U</Letter>
        <Letter>J</Letter>
        <Letter>?</Letter>
        <Letter>X</Letter>
      </div>,
    destination
    );
  </script>
  </body>
</html>

```

I have wrong result ☹  
Why don’t letters have backgrond and others props of style?

---

<div class="post-metadata">

**Author:** ![reexel](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/reexel/32/12455_2.png) [@reexel](https://forum.kirupa.com/u/reexel)\
**Post date:** [September 14, 2020, 5:09pm UTC](https://forum.kirupa.com/t/why-dont-work-letterstyle/644182/2 "2020-09-14T17:09:56Z")

</div>

![Снимок экрана от 2020-09-14 08-02-45](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/5/59b2bd8e91bddb7578e906f2155fffebe3c6b867.png)

---

<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:** [September 14, 2020, 5:12pm UTC](https://forum.kirupa.com/t/why-dont-work-letterstyle/644182/3 "2020-09-14T17:12:03Z")

</div>

There’s a missing property in the div. See: [https://www.kirupa.com/react/errata.htm](https://www.kirupa.com/react/errata.htm)

---

<div class="post-metadata">

**Author:** ![reexel](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/reexel/32/12455_2.png) [@reexel](https://forum.kirupa.com/u/reexel)\
**Post date:** [September 15, 2020, 9:46am UTC](https://forum.kirupa.com/t/why-dont-work-letterstyle/644182/4 "2020-09-15T09:46:22Z")

</div>

Thank you very much! I read Russian version book. It has error on this page ☹  
Now I added this prop and all good! Thank you!  
It is my first steps in ReactJS
