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

Time:08-25

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:

A blank webpage with the word 'Test'

Instead, I get this:

A blank webpage with no content

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

CodePudding user response:

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?

  • Related