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.

Check reactjs.org/docs/components-and-props.html , there is the following note "React treats components starting with lowercase letters as DOM tags", so in order to use your own component always start component names with a capital letter. — Jaime Noel Alvarez Luna
– Jaime Noel Alvarez Luna, Commented Mar 18, 2020 at 1:15

Santiago Rebella · Accepted Answer · 2020-03-18 01:10:28Z

2

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

edited Mar 18, 2020 at 1:10

answered Mar 18, 2020 at 1:06

Santiago Rebella

2,4492 gold badges23 silver badges29 bronze badges

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

3 Comments

Programmerzzz Over a year ago

yes it did work...But is it so opinionated in react..? BTW..I am just starting on react..so pardon my novice questions

Nicolas SEPTIER Over a year ago

@Programmerzzz React assumes every component starting with a lowercase name is an html element.

Programmerzzz Over a year ago

To call component without 'H' we could use ` {hello('John',82)} {hello('Jane',89)}` like Santiago said..Documenting here for someone who may find it useful.Also in this case, we can change the component definition/Signature as function hello(name,age) similar to regular JS function.

Collectives™ on Stack Overflow

simple React component issue

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related