React stateless example

Question

So I just started learning React and here's the first state example that I am working on.

Here's the code :-

<div id="app"></div>
<script src="https://npmcdn.com/react@15.3.1/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.js"></script>
<script>        

    //main render
    ReactDOM.render(
        React.createElement(TextAreaCounter, {text: 'Bob'}),
        document.getElementById("app")
    );

    //create component now
    var TextAreaCounter = React.createClass({

        propTypes: {
            text: React.propTypes.string,
        },  

        getDefaultProps: function() {
            return {
                text: '',
            };
        },

        render: function(){
            return React.DOM.div(null,
                React.DOM.textarea({
                    defaultValue: this.props.text,
                }),
                React.DOM.h3(null, this.props.text.length)
            );
        }           

    });

</script>

Here's the error in console:

react.js:20150 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
    at invariant (react.js:20150)
    at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (react.js:18327)
    at ReactCompositeComponentWrapper.performInitialMount (react.js:6256)
    at ReactCompositeComponentWrapper.mountComponent (react.js:6139)
    at Object.mountComponent (react.js:13787)
    at mountComponentIntoNode (react.js:11873)
    at ReactReconcileTransaction.perform (react.js:16987)
    at batchedMountComponentIntoNode (react.js:11895)
    at ReactDefaultBatchingStrategyTransaction.perform (react.js:16987)
    at Object.batchedUpdates (react.js:10324)

What wrong am I doing here? I tried to find some solutions googling the error I received in console, but nothing helped me. Would be great to get some expert comment on this.

Answer 1

If you are just learning React I recommend you learn JSX which is much easier to understand. In that case your code would be

<div id="app"></div>
<script src="https://npmcdn.com/react@15.3.1/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
    <script type="text/babel">
        var TextAreaCounter = React.createClass({
            getDefaultProps: function() {
               return {
                   text: '',
               };
             },
             render: function() {
                return (
                  <div>
                   <textarea defaultValue={this.props.text}></textarea>
                   <h3>{this.props.text.length}</h3>
                 </div>
                );
             }
        });
          ReactDOM.render(
            <TextAreaCounter text='Bob' /> ,document.getElementById("app")
        );
        </script>

try this tutorial https://www.sitepoint.com/getting-started-react-jsx/

Answer 2

I think, You need to define the TextAreaCounter first then use ReactDOM.render to render the TextAreaCounter component.

Reason will be, at the time of rendering TextAreaCounter in ReactDOM.render value of TextAreaCounter will be undefined, If you define that variable as let instead of var it should throw the error:

TextAreaCounter is not defined.

Just because of var, you are not getting that error, I will suggest to read the difference between let and var also. Check this answer.

Write it like this, it will work, run this snippet:

<div id="app"></div>
<script src="https://npmcdn.com/react@15.3.1/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.js"></script>
<script >

     var TextAreaCounter = React.createClass({

          getDefaultProps: function() {
              return {
                  text: '',
              };
          },

          render: function() {
              return React.DOM.div(null,
                 React.DOM.textarea({
                    defaultValue: this.props.text,
                 }),
                 React.DOM.h3(null, this.props.text.length)
              );
          }
     });

     ReactDOM.render(
          React.createElement(TextAreaCounter, {text: 'Bob'}),
          document.getElementById("app")
     );

</script>