# Learning REACT Chapter 4

**URL:** <https://forum.kirupa.com/t/learning-react-chapter-4/645420>\
**Category:** programming\
**Created:** [December 21, 2020, 9:58pm UTC](https://forum.kirupa.com/t/learning-react-chapter-4/645420 "2020-12-21T21:58:09Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![joeReact](https://avatars.discourse-cdn.com/v4/letter/j/3d9bf3/32.png) [@joeReact](https://forum.kirupa.com/u/joeReact)\
**Post date:** [December 21, 2020, 9:58pm UTC](https://forum.kirupa.com/t/learning-react-chapter-4/645420/1 "2020-12-21T21:58:09Z")

</div>

Hi Kirupa,  
I am a beginner in React and following your book. Got stuck in chapter 2. The code is not working. className not doing anything. If I use div div div it’s fine. If I change it to .letter - nothing is happening . Could you please enlighten me, what is that I am doing wrong? Here is the code:

```
<DOCTYPE html>

<html>

<head>

<meta charset = "utf-8">

<title>React ! React ! 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>

  .letter {

   padding: 10px;

   margin: 10px;

   background-color: #FFDE00;

   color: rgb(118, 26, 223);

   display: inline-block;

   font-family: monospace;

   font-size: 48px;

   text-align: center;

</style>

</head>

<body>

<div id="container" >

<script type="text/babel">

var destination = document.querySelector("#container");

class Letter extends React.Component{

  render(){

    return(

      <div className="letter" >

       {this.props.children}

      </div>

     );

   }

 }

 ReactDOM.render(

   <div>

    <div>A</div>

    <div>E</div>

    <div>I</div>

    <div>O</div>

    <div>U</div>

  </div>,

  destination

  );

</script>

</body>

</html>
```

---

<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:** [December 22, 2020, 6:53pm UTC](https://forum.kirupa.com/t/learning-react-chapter-4/645420/2 "2020-12-22T18:53:48Z")

</div>

It is because you aren’t using the `Letter` component 🙂

If you replace the child `div` elements in your `render` function with the `Letter` element, you’ll see the correct behavior.
