ReactJS issue when using capitalized methods

Question

Code pen link here.

In my fist ReactJS tutorial video, I was writing hello world script and disappointingly its not working. I am not seeing any problem with the script or html tags I used but simple ReactDOM.Render() function isn't working. Code pen SS below.

As you can see, the HTML block has root div HTML block:

<div id="root">Why ReactDOM.Render() not working?</div>

JS(Babel) block has simple render function and in the right side pane the preview is showing default text in root element but not the text.

JS block:

var el = <h1>YOU HELLO WORLD WHY DONT YOU WORK</h1>
ReactDOM.Render(
el,
  Document.getElementById("root")
)

kind user · Accepted Answer · 2018-12-15 22:14:30Z

2

JavaScript is case-sensitive.

Try:

ReactDOM.render(
   el,
   document.getElementById("root"),
);

And remember to import React as well as ReactDOM.

https://codepen.io/anon/pen/REaEBo

edited Dec 15, 2018 at 22:14

answered Dec 15, 2018 at 19:04

kind user

42k8 gold badges69 silver badges78 bronze badges

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

2 Comments

muradm Over a year ago

Document also should be lower-case.

dejjub-AIS Over a year ago

though the case senstive was visible error I was doing, earlier the code I copied from tutorials also didn't work because I missed the steps to add react and react-dom as instructed in project setup. Thanks

Collectives™ on Stack Overflow

ReactJS issue when using capitalized methods

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related