Using codepen.io as a testbed...SOLVED

programming web dev
1

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 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") );
2

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
  );