React Markdown Previewer app, css class values ignored?

Perhaps I forgot something about how React components behave, but I noticed that even though I specified class=“editor”, my height and width values for the “editor” class are ignored. The same values put into textarea allow my React component to properly size itself. Why is this happening?

My css file:

body {
    background-color: #334;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

.editor {
  height: 300px;
  width: 500px;
}

.preview {
  border: 10px solid black;
  border-radius:10px;
  background-color: white;
  height: 300px;
  width: 300px;
}

textarea {
  height: 300px;
  width: 500px;
}

And here are the components defined in my render function:

return (<div>
        <h1>Editor</h1>
        <textarea id="editor" class="editor" value={this.state.input} onChange={this.handleChange} />
        <h1>Preview</h1>
        <div id="preview" class="preview" dangerouslySetInnerHTML={inner}></div>
      </div>
    );

It seems as both “editor” and “preview” class names are not getting values from my css file.

Because class is a reserved work in JS, React can’t use that word. In React, you use className in your JSX.

Similarly, where you would use for in html, you have to use htmlFor in JSX.

<face palm>
Thank you.