CODEWITHSUNDEEP
reactjs
Niyaz
Niyaz

Reputation: 2893

React.createElement: type is invalid expected a string or a class/function but got: <div />

Error: React.createElement: type is invalid expected a string or a class/function but got: . Did you accidentally export a JSX literal instead of a component?

class TestDynamic extends React.Component {

  getSpan(value) {
    return (<span>Spanned {value}</span>)
  }

  renderDynamicComponent() {
    const Test = this.getSpan(1)
    return (<div> <Test />  </span>)
  }

  render() {
    return (<div>{this.renderDynamicComponent() }</span>)
  }

}

I tried with return (<div>{ Test }</span>) it displays nothing

Upvotes: 1

Views: 291

Answers (2)

Shubham Khatri
Shubham Khatri

Reputation: 282030

Instead of declaring Test as a plain class, extend it from React.Component and render it like <Test />. Also render getSpan as {Test1} and specify proper closing and opening tags

class TestDynamic extends React.Component{
    
      getSpan(value) {
        return (<span>Spanned {value}</span>)
      }
    
      renderDynamicComponent() {
        const Test = this.getSpan(1)
        return (<div> {Test}</div>)
      }
    
      render() {
        return (<div>{this.renderDynamicComponent() }</div>)
      }
    
    }
    
    ReactDOM.render(<TestDynamic />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"/>

Upvotes: 2

Manoj
Manoj

Reputation: 1195

Please visit your return statement in render. it should not be span. closing div tag is missing. looks like some typo.

import React from 'react';
class TestDynamic extends React.Component {

  getSpan(value) {
    return (<span>Spanned {value}</span>)
  }

  renderDynamicComponent() {
    const Test = this.getSpan(1)
    return (<div> <Test />  </span>)
  }

  render() {
    return (<div>{this.renderDynamicComponent() }</div>)
  }

}

Upvotes: 0

Related Questions