Why isn't this child react component rendering?

Question

I'm trying to get a child component to render in react and it's not rendering. If I write the actual JSX composed in the child component in the parent, it renders, Why is that? The examples in the documentation show that this is possible, I don't know what I'm doing wrong.

Example here: https://jsfiddle.net/69z2wepo/309969/

class App extends React.Component {
  render() { 
  return(
  	<Rectangle />
    );
  }
}

function Rectangle(){
    return (
        <div className="Rectangle">
          <square />
        </div>
   );
}

function square(){
    return (
        <div className="square">
       </div>
   );
}


ReactDOM.render(
  <App />,
  document.getElementById('container')
);

 .Rectangle {
   position: relative;
   background-color: #222;
   height: 760px;
   width: 40px;
 }

 .square {
   position: absolute;
   background-color: green;
   top: 0px;
   left: 0px;
   height: 20px;
   width: 20px;
 }

<!Doctype>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
  </head>
  <body>
    <div id="container">
      <!-- This element's contents will be replaced with your component. -->
    </div>
</body>

The end result should show a dark grey rectangle, with a 20x20 pixel green square affixed to the top left of it.

devserkan · Accepted Answer · 2018-09-29 22:30:55Z

2

Name your components starting with a capital letter.

function Square(){
    return (
        <div className="square">
       </div>
   );
}

function Rectangle(){
    return (
        <div className="Rectangle">
          <Square />
        </div>
   );
}

answered Sep 29, 2018 at 22:30

devserkan

17.7k4 gold badges34 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Saladin Over a year ago

Thank you. Forgot about that.

Sakib Anjum · Accepted Answer · 2018-09-29 22:34:54Z

0

If you are trying to render the child component "square" then change the name square to Square and also change the function name square to Square. Component name always needs to start with Capital Letter. Otherwise it will not render.

answered Sep 29, 2018 at 22:34

Sakib Anjum

1761 silver badge4 bronze badges

Comments

Sagiv b.g · Accepted Answer · 2018-09-29 22:37:38Z

There are 2 issues here:

Components name should start with capital letters.
In your fiddle you are using the logoutBox className but you wrote a .square css class.

class App extends React.Component {
  render() {
    return (
      <Rectangle />
    );
  }
}

function Rectangle() {
  return (
    <div className="Rectangle">
      <Square />
    </div>
  );
}

function Square() {
  return (
    <div className="square">
    </div>
  );
}
    
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

 .Rectangle {
   position: relative;
   background-color: #222;
   height: 760px;
   width: 40px;
 }

 .square {
   position: absolute;
   background-color: green;
   top: 0px;
   left: 0px;
   height: 20px;
   width: 20px;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root" />

Collectives™ on Stack Overflow

Why isn't this child react component rendering?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related