# Using codepen.io as a testbed

**URL:** <https://forum.kirupa.com/t/using-codepen-io-as-a-testbed/646694>\
**Category:** programming\
**Created:** [March 19, 2021, 4:32pm UTC](https://forum.kirupa.com/t/using-codepen-io-as-a-testbed/646694 "2021-03-19T16:32:05Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![karlar](https://avatars.discourse-cdn.com/v4/letter/k/96bed5/32.png) [@karlar](https://forum.kirupa.com/u/karlar)\
**Post date:** [March 19, 2021, 4:32pm UTC](https://forum.kirupa.com/t/using-codepen-io-as-a-testbed/646694/1 "2021-03-19T16:32:05Z")

</div>

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.

class Letter extends React.Component {  
render() {  
let letterStyle = {  
padding: 10,  
margin: 10,  
backgroundColor: “yellow”,  
color: “green”,  
display: “inline-block”,  
fontSize: 32,  
textAlign: “center”  
};  
return (

  
{this.props.children}  

  
);  
}  
}

ReactDOM.render(

  

A
  

E
  

I
  

O
  

U

, 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:** [March 20, 2021, 11:10pm UTC](https://forum.kirupa.com/t/using-codepen-io-as-a-testbed/646694/2 "2021-03-20T23:10:00Z")

</div>

Can you share a link to your pen? That may make debugging a bit easier!