CODEWITHSUNDEEP
javascriptreactjs
Tristan Newman
Tristan Newman

Reputation: 416

Component is not rendering

I'm working through the React 16 course on Udemy. We are using Codepen to create our first React apps in the course. Although the instructor is able to render the component in the video, I follow his code and it doesn't render. Here's the HTML, CSS, and JS code:

HTML: 

<div class="person">
  <h1>Your name</h1>
  <p1>Manu</p1>
</div>

CSS:

.person {
  margin:10px;
  box-shadow:2px 2px #ccc;
  border: 1px solid #eee;
  padding: 20px;
  width: 200px;
  display: inline-block;
}

JavaScript:

function Person(){
  return(
    <div className="person">
      <h1>Your name</h1>
      <p1>Tristan</p1>
    </div>
  );
}

ReactDOM.render(<Person/>, document.querySelector('#p1'));

Upvotes: 1

Views: 121

Answers (2)

falinsky
falinsky

Reputation: 7428

You have a misprint: Persan vs Person.

Also instead of class you should use className because JSX is just a javascript and keyword class is reserved.

Also instead of p1 element I believe you should use either p or some custom component which will have a name started with a capital letter.

function Person() {
  return (
    <div className="person">
      <h1>Your name</h1>
      <p>Tristan</p>
    </div>
  );
}

ReactDOM.render(<Person/>, document.querySelector('#p1'));
.person{
  margin:10px;
  box-shadow:2px 2px #ccc;
  border: 1px solid #eee;
  padding: 20px;
  width: 200px;
  display: inline-block;
}
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="p1"></div>

Upvotes: 5

CRayen
CRayen

Reputation: 579

The issue is due to the typo Persan in the component declaration. It should be 

function Person(){
 return(
  <div className="person">
   <h1>Your name</h1>
   <p1>Tristan</p1>
  </div>
 );
}

ReactDOM.render(<Person/>, document.querySelector('#p1'));

Upvotes: 0

Related Questions