CODEWITHSUNDEEP
reactjsecmascript-6textarea
a_chubenko
a_chubenko

Reputation: 147

react type is invalid

Sirs, I'm new to React. I get the error: Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function

My code: 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

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

export class TextAreaCounter extends React.Component{
    static propTypes= {
    text: React.PropTypes.string,
    }
    getDefaultProps = {

            text: '',

    }
    render() {
        return(
        <div>
            <textarea defaultValue = {this.props.text}></textarea>
            <h3>this.props.text.length</h3>
        </div>
        );
    }
};

Upvotes: 1

Views: 81

Answers (2)

Amruth
Amruth

Reputation: 5912

ReactDom.render takes first as jsx so pass <TextAreaCounter text="Bob" /> with text prop.

ReactDOM.render(<TextAreaCounter text="Bob" />, document.getElementById("app"));

Upvotes: 3

Shubham
Shubham

Reputation: 738

Please Try Given Below Code

import React from "react";
import ReactDOM from "react-dom";
import PropTypes from "prop-types";
import "./index.css";

class TextAreaCounter extends React.Component {
  static propTypes = {
    text: PropTypes.string
  };
  getDefaultProps = {
    text: "dfgfdg"
  };
  render() {
    return (
      <div>
        <textarea defaultValue={this.props.text} />
        <h3>{this.props.text}</h3>
      </div>
    );
  }
}

ReactDOM.render(<TextAreaCounter />, document.getElementById("root"));

Upvotes: 2

Related Questions