React Component not returning any content

I might be missing something simple here, but I am confused why all of the content of the complexLayerCommandUI React Component is simply not rendering.

import React from "https://cdn.skypack.dev/react";
import ReactDOM from "https://cdn.skypack.dev/react-dom";
import { Provider, connect } from "https://cdn.skypack.dev/react-redux";
import { createStore } from "https://cdn.skypack.dev/redux";
class complexLayerCommandUI extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
      <p>Hello</p>
      </div>
    );
  }
}
class App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <>
        <header>
          <h1>Voxel Brensenham Coordinates Tester</h1>
        </header>
        <main>
          <section>
            <h2>Create Complex Layers</h2>
            <p className="section-desc"></p>
           <form>
               <complexLayerCommandUI />
           </form>
          </section>
          <section>
            <h2>Extrude Complex Layers</h2>
            <p className="section-desc"></p>
            <form></form>
          </section>
          <a className="run-button">Run Program</a>
        </main>
      </>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("root"));

This outputs the following without any content from the embedded component. It is their and I added a border in the CSS to show it, but nothing is rendering from it.

Hi @michaelnicol !

React components use pascal case instead of camel case.
When I rename your component in the proper casing then it renders to the screen.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.