I'm having some problems with my React app. I was implementing feature authUser and now I'm receiving error like:

TypeError: Cannot read property 'createElement' of undefined

and it shows red on return (..

This is my code

import { React, Component } from "react";
import Widget from "ponents/Widget/index";
import { Badge, Button, Col, Row } from "antd";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import { userSignOut } from "appRedux/actions/Auth";
import LineIndicator from "./LineIndicator";


class Portfolio extends Component {

  render() {
    const { authUser } = this.props;

    return (
      <Widget>
        <h2 className="h4 gx-mb-3">Your Portfolio Balance</h2>
        <Row>
          <Col lg={12} md={12} sm={12} xs={24}>

            <div className="ant-row-flex">
              <h2 className="gx-mr-2 gx-mb-0 gx-fs-xxxl gx-font-weight-medium">$179,626</h2>
            </div>
            <p className="gx-text-grey"></p>
            <div className="ant-row-flex gx-mb-3 gx-mb-md-2">
              <Button className="gx-mr-2" type="primary">Deposit</Button>
              <Button className="gx-btn-cyan">Withdraw</Button>
            </div>
            <p><Link className="gx-text-primary" to="/te">- Messages <Badge count={23} style={{ backgroundColor: '#52c41a' }} /></Link></p>
            <p><Link className="gx-text-primary" to="/te">- Notifications <Badge count={320} style={{ backgroundColor: '#52c41a' }} /></Link></p>
            <p><Link className="gx-text-primary" to="/te">- Active Servers <Badge count={5} style={{ backgroundColor: '#52c41a' }} /></Link></p>
            <p><Link className="gx-text-primary" to="/te">- Billing </Link></p>
            <p><Link className="gx-text-primary" to="/te">- Logout </Link></p>


          </Col>
          <Col lg={12} md={12} sm={12} xs={24}>
            <div className="gx-site-dash">
              <h4 className="gx-mb-3">Wele back {authUser ? authUser.name : "Loading"}</h4>
              <img alt="" width="160" src={require("assets/images/w-logo.png")} />
            </div>
          </Col>
        </Row>
      </Widget>
    )
  }
}

const mapStateToProps = ({ auth }) => {
  const { authUser } = auth;
  return { authUser }
};

export default connect(mapStateToProps, { userSignOut })(Portfolio);

What am I doing wrong?

I'm having some problems with my React app. I was implementing feature authUser and now I'm receiving error like:

TypeError: Cannot read property 'createElement' of undefined

and it shows red on return (..

This is my code

import { React, Component } from "react";
import Widget from "ponents/Widget/index";
import { Badge, Button, Col, Row } from "antd";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import { userSignOut } from "appRedux/actions/Auth";
import LineIndicator from "./LineIndicator";


class Portfolio extends Component {

  render() {
    const { authUser } = this.props;

    return (
      <Widget>
        <h2 className="h4 gx-mb-3">Your Portfolio Balance</h2>
        <Row>
          <Col lg={12} md={12} sm={12} xs={24}>

            <div className="ant-row-flex">
              <h2 className="gx-mr-2 gx-mb-0 gx-fs-xxxl gx-font-weight-medium">$179,626</h2>
            </div>
            <p className="gx-text-grey"></p>
            <div className="ant-row-flex gx-mb-3 gx-mb-md-2">
              <Button className="gx-mr-2" type="primary">Deposit</Button>
              <Button className="gx-btn-cyan">Withdraw</Button>
            </div>
            <p><Link className="gx-text-primary" to="/te">- Messages <Badge count={23} style={{ backgroundColor: '#52c41a' }} /></Link></p>
            <p><Link className="gx-text-primary" to="/te">- Notifications <Badge count={320} style={{ backgroundColor: '#52c41a' }} /></Link></p>
            <p><Link className="gx-text-primary" to="/te">- Active Servers <Badge count={5} style={{ backgroundColor: '#52c41a' }} /></Link></p>
            <p><Link className="gx-text-primary" to="/te">- Billing </Link></p>
            <p><Link className="gx-text-primary" to="/te">- Logout </Link></p>


          </Col>
          <Col lg={12} md={12} sm={12} xs={24}>
            <div className="gx-site-dash">
              <h4 className="gx-mb-3">Wele back {authUser ? authUser.name : "Loading"}</h4>
              <img alt="" width="160" src={require("assets/images/w-logo.png")} />
            </div>
          </Col>
        </Row>
      </Widget>
    )
  }
}

const mapStateToProps = ({ auth }) => {
  const { authUser } = auth;
  return { authUser }
};

export default connect(mapStateToProps, { userSignOut })(Portfolio);

What am I doing wrong?

• javascript
• reactjs
• react-redux

• 2 You probably need: import React, { Component } from "react"; instead of import { React, Component } from "react"; – Kostas Minaidis Commented Oct 10, 2019 at 22:14
• Yes, thank you very much! – rade rade Commented Oct 10, 2019 at 22:15

1 Answer 1

I think you are importing React incorrectly

import { React, Component } from "react";

Should be this

import React, {Component} from "react";