How to give each letter a different color - Learning React?

programming web dev
1

Help pls. I wanted to attain that results from the book Learning REACT as a beginner. And I follow all procedure from the book, but I didn’t manage to make the results that will create all the 5 letters to have different colors on each background.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Styling in 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;
      }

      .letter {
        padding: 10px;
        margin: 10px;
        background-color: #ffde00;
        color: #333;
        display: inline-block;
        font-family: monospace;
        font-size: 32px;
        text-align: center;
      }
    </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>A</Letter>
          <Letter>B</Letter>
          <Letter>I</Letter>
          <Letter>O</Letter>
          <Letter>U</Letter>
        </div>,
        destination
      );
    </script>
  </body>
</html>
2

Hi @Ettenytten - welcome to the forums! Right now, you have all of your letters hard-coded to be #ffde00 as defined in letterStyle:

backgroundColor: "#ffde00",

In the book, you’ll see later in the chapter where we pass in a prop to the Letter component that defines the color. We then read that prop and assign the color value to our letterStyle object.

Have you tried that code and aren’t able to see the results? If so, please post the code from that section and we can help you out further! :slight_smile:

Cheers,
Kirupa

1 Like