CODEWITHSUNDEEP
javascriptreactjs
user1028880
user1028880

Reputation:

React.js Simple component composition issue

I try to reproduce the following simple HTML code in react:

Classic HTML

<div>
  Hello
  <div>child</div>
  <div>child</div>
  <div>child</div>
</div>

React(works)

var HelloComponent = React.createClass(
{
  render: function()
  {
    return (
      <div>
        Hello
        <div>child</div>
        <div>child</div>
        <div>child</div>
      </div>
    );
  }
});

var mount = React.render(<HelloComponent/>, document.body);

React(not works)

var childComponent = React.createClass(
{
  render: function()
  {
    return (<div>child</div>);
  }
});

var HelloComponent = React.createClass(
{
  render: function()
  {
    return (
      <div>
        Hello
        <childComponent/>
        <childComponent/>
        <childComponent/>
      </div>
    );
  }
});

var mount = React.render(<HelloComponent/>, document.body);

Error:

Uncaught TypeError: Cannot read property 'replace' of undefined
createSourceCodeErrorMessage
transformCode
...

What do I miss?? Thanks.

Upvotes: 0

Views: 290

Answers (1)

Felix Kling
Felix Kling

Reputation: 816334

Captilize the component name. From the documentation:

HTML Tags vs. React Components

React can either render HTML tags (strings) or React components (classes).

To render a HTML tag, just use lower-case tag names in JSX:

var myDivElement = <div className="foo" />;
React.render(myDivElement, document.body);

To render a React Component, just create a local variable that starts with an upper-case letter:

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
React.render(myElement, document.body);

React's JSX uses the upper vs. lower case convention to distinguish between local component classes and HTML tags.

Upvotes: 3

Related Questions