Help needed for 4 lines of code - Cannot get React to work at CodePen

JavaScript
1

**Tell us what’s happening
I can’t get ReactDOM to render a simple element at CodePen (but it worked in create-react-app). Any help is very much appreciated.

Your code so far
https://codepen.io/mathmantall/pen/qBOemmx?editors=1010

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36.

Challenge: Build a Random Quote Machine

Link to the challenge:

2

Name of the component should be capitalized( Test2)

1 Like
3

Many thanks for the help - never thought that a naming convention became a “naming requirement” at codePen.

4

I would suggest to always make sure the component name is capitalized

Try adding the “Input” code below to the Babel compiler and look at the difference in the React.createElement calls in the output of HelloWorld1 and HelloWorld2

Input 
function hello(props) {
  // Correct! This use of <div> is legitimate because div is a valid HTML tag:
  return <div>Hello {props.toWhat}</div>;
}

function Hello(props) {
  // Correct! This use of <div> is legitimate because div is a valid HTML tag:
  return <div>Hello {props.toWhat}</div>;
}

function HelloWorld1() {
  // Correct! React knows <Hello /> is a component because it's capitalized.
  return <Hello toWhat="World" />;
}

function HelloWorld2() {
  // Wrong! React thinks <hello /> is an HTML tag because it's not capitalized:
  return <hello toWhat="World" />;
}
Output 
function hello(props) {
  // Correct! This use of <div> is legitimate because div is a valid HTML tag:
  return /*#__PURE__*/React.createElement("div", null, "Hello ", props.toWhat);
}

function Hello(props) {
  // Correct! This use of <div> is legitimate because div is a valid HTML tag:
  return /*#__PURE__*/React.createElement("div", null, "Hello ", props.toWhat);
}

function HelloWorld1() {
  // Correct! React knows <Hello /> is a component because it's capitalized.
  return /*#__PURE__*/React.createElement(Hello, {
    toWhat: "World"
  });
}

function HelloWorld2() {
  // Wrong! React thinks <hello /> is an HTML tag because it's not capitalized:
  return /*#__PURE__*/React.createElement("hello", {
    toWhat: "World"
  });
}