Learning REACT Chapter 4

programming
1

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/[email protected]/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>
2

It is because you aren’t using the Letter component :slight_smile:

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