Why don't work letterStyle ?

programming web dev
1

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/[email protected]/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 :frowning:
Why don’t letters have backgrond and others props of style?

2

Π‘Π½ΠΈΠΌΠΎΠΊ экрана ΠΎΡ‚ 2020-09-14 08-02-45
Π‘Π½ΠΈΠΌΠΎΠΊ экрана ΠΎΡ‚ 2020-09-14 08-02-451920Γ—1080 139 KB

3

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

1 Like
4

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

1 Like