simple React component issue

Question

I have hte below html, css and JS HTML:

<div id="app1"></div>

JS:

function hello(props){
  return(
  <div className="Person">
    <h1>Name: {props.name}</h1>
    <p>Age: {props.age}</p>
  </div>
  );
}

var app=(
<div>
  <hello name="John" age="82"/>
  <hello name="Jane" age="89"/>
</div>
);

ReactDOM.render(app,document.querySelector("#app1"));

CSS

.Person{
  width:200px;
  color:black;
  box-shadow:0 2px 2px #ccc;
  display:inline-block;
  margin:10px;
  padding:2px;
}

But this code only works if we have the component name as Person anyother name cause the below error

Uncaught ReferenceError: Person is not defined 
 at pen.js:-5
Uncaught ReferenceError: Person is not defined 
 at pen.js:-4

you can assume Reactjs and ReactDOM were imported.

Answer 1

Try changing the first letter of hello to capitol like Hello (the error with only that code seems a caching thing probably didnt compiled because of having the jsx element there without uppercase) you could instead call in the code {hello('john', 82)} as alternative