# Using codepen.io as a testbed...SOLVED

**URL:** <https://forum.kirupa.com/t/using-codepen-io-as-a-testbed-solved/644230>\
**Category:** web dev\
**Created:** [September 18, 2020, 2:42am UTC](https://forum.kirupa.com/t/using-codepen-io-as-a-testbed-solved/644230 "2020-09-18T02:42:12Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Brian\_Pettitt](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/brian_pettitt/32/12327_2.png) [@Brian\_Pettitt](https://forum.kirupa.com/u/Brian_Pettitt)\
**Post date:** [September 18, 2020, 2:42am UTC](https://forum.kirupa.com/t/using-codepen-io-as-a-testbed-solved/644230/1 "2020-09-18T02:42:13Z")

</div>

EDIT: I was able to work out this issue. I had to change the \<div\>'s at the bottom to . I also think (but am not sure) that the spacing on the return statements is important. It seems to require them to be on the same line…

`return ( <div>`

…Original post…  
I am trying to complete Chapter 4 in Learning React…

I have seen the errata and have another issue. I am only seeing plain, unformatted text in the output. I am using [codepen.io](http://codepen.io) as my development platform and have entered the following in the JS window. Prior to using letterStyle, the formatting was correct…what am I missing?

Thanks in advance,  
Brian

```
class Letter extends React.Component {
  render() { 
    let letterStyle = {
      padding: 10,
      margin: 10,
      backgroundColor: "yellow",
      color: "green",
      display: "inline-block",
      fontSize: 32,
      textAlign: "center"
    };
    return ( 
      <div style={letterStyle}>
        {this.props.children}
      </div> 
    );
  }
}

ReactDOM.render( <div id="container">
    <div>A</div>
    <div>E</div>
    <div>I</div>
    <div>O</div>
    <div>U</div>
  </div>, document.querySelector("#container") );
```

---

<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:** [September 19, 2020, 2:13am UTC](https://forum.kirupa.com/t/using-codepen-io-as-a-testbed-solved/644230/2 "2020-09-19T02:13:27Z")

</div>

Glad you were able to resolve it, but it doesn’t have to be on the same line. For example, this works:

```
  ReactDOM.render(
    <div>
      <Letter>A</Letter>
      <Letter>E</Letter>
      <Letter>I</Letter>
      <Letter>O</Letter>
      <Letter>U</Letter>
    </div>,
    destination
  );
```