CODEWITHSUNDEEP
javascriptcssreactjs
plethorax
plethorax

Reputation: 149

Basic React code not producing any output

I just started with React and wrote my very first code but as per the video(tutorial) the output is not generated.

function People(prop){
  return(
    <div className="peer">
  <h1>{prop.nam}</h1>
  <h3>age: {prop.age}</h3>
 
</div>
   
  );
}

ReactDOM.render(<peer name="Mark" age="20"/>,document.querySelector("#p1"));
.peer{
  border: 2px solid black;
  padding: 10px;
  width: 150px;
  box-shadow: 5px 10px blue;
  
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="p1"></div>

Upvotes: 0

Views: 75

Answers (2)

Muhammad Ali
Muhammad Ali

Reputation: 2648

You’ve to use PascalCase name for react components. so instead of using <peers ... /> , which i think is undefined in your case, use <People ... />, which is actually there in your component file.

Upvotes: 0

Carl Edwards
Carl Edwards

Reputation: 14444

You're not passing your People component correctly in your render call. It should look something like this:

ReactDOM.render(<People name="Mark" age="20"/>, document.querySelector("#p1"));

Also Worth Noting: Stylistically you should name your prop parameter props. This and you're also missing an e to your name prop.

Upvotes: 4

Related Questions