Functional react component not rendering in another component when exported to Chrome debug

Question

I want to render a component in another component. By directly exporting to a chrome debug window, I tested the following code:

function test() {
    return <p>Test</p>;
}

function app() {
    return <test />;
}

export default app;

I expect the result to be equivalent to:

function app() {
    return <p>Test</p>;
}

export default app;

Which should output:

Instead, I get this:

Any insight appreciated. I will provide additional information on request, but I am unsure what could be missing.

p.s. ignore blur on address bar, just using chrome account

Answer 1

I would first try capitalizing your components i.e.

   function Test () {
     return <p>Test</p>
   }
   function App () {
     return <Test/>
   }

This could be a similar question: ReactJS component names must begin with capital letters?