Element type not valid: string expected (for inline components) or React Error class / function
I have an issue with React when trying to change a page using a button (but) the console gives me:
Element type is invalid: expected string (for built-in components) or> class / function (for composite components), but received: undefined. You> probably forgot to export your component from the file it defined.
But when I paste the code onClick
into the class code, it shows the jsx code. This is how it works, but why am I still getting the error? Here is my code:
import React from 'react';
import {render} from 'react-dom';
//sass
require('../sass/style.scss');
var pages = ['Qrscan'];
var jsx = [<Qrscan />];
class App extends React.Component {
constructor (props) {
super(props);
this.state = {target: <Menu />};
App.changePage = App.changePage.bind(this);
}
static changePage (tar) {
this.setState({target: tar});
}
render () {
return (
this.state.target
)
}
}
//Rendering
class Menu extends React.Component {
render() {
return (
<div id="root">
<Header />
<div className="container">
<But target="Qrscan" class="button button-QR" text="Use QR code" type="button" linkTo="" />
<But class="button button-URL" text="Use URL" type="button" />
</div>
</div>
)
}
}
class Qrscan extends React.Component {
render() {
return (
<h1>test</h1>
)
}
}
//elements
class Header extends React.Component {
render () {
return (
<div className="header">
<div className="header-logo">Jukey</div>
</div>
)
}
}
class But extends React.Component {
getInfo () {
for (var i = 0; i < pages.length; i++) {
if(pages[i] == this.props.target) {
return jsx[i];
}
}
}
render () {
return (
<button onClick={() => App.changePage(this.getInfo())} className={this.props.class}>{this.props.text}</button>
)
}
}
render (<App />, document.getElementById('app'));
Thanks for taking the time to help me with my problems!
source to share
ES6 class declarations are not hoisted .
In your second line, when you defined var jsx = [<Qrscan />];
, this element is actually undefined
. When I print out the contents of the array jsx
, I get:
Object {$$typeof: Symbol(react.element), type: undefined, key: null, ref: null, props: Object…}
Thus, you just need to wrap this array declaration jsx
in after your component declaration <Qrscan>
.
Refer to the following JSFiddle for a fix and see for yourself that it works after changing the declaration order (:
var pages = ['Qrscan'];
//Rendering
class Menu extends React.Component {
render() {
return (
<div id="root">
<Header />
<div className="container">
<But target="Qrscan" class="button button-QR" text="Use QR code" type="button" linkTo="" />
<But class="button button-URL" text="Use URL" type="button" />
</div>
</div>
)
}
}
class App extends React.Component {
constructor (props) {
super(props);
this.state = {target: <Menu />};
App.changePage = App.changePage.bind(this);
}
static changePage (tar) {
this.setState({target: tar});
}
render () {
return (
this.state.target
)
}
}
class Qrscan extends React.Component {
render() {
return (
<h1>test</h1>
)
}
}
var jsx = [<Qrscan />];
//elements
class Header extends React.Component {
render () {
return (
<div className="header">
<div className="header-logo">Jukey</div>
</div>
)
}
}
class But extends React.Component {
getInfo () {
for (var i = 0; i < pages.length; i++) {
if (pages[i] == this.props.target) {
return jsx[i];
}
}
}
render () {
return (
<button onClick={() => App.changePage(this.getInfo())} className={this.props.class}>{this.props.text}</button>
)
}
}
ReactDOM.render (<App />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app">
</div>
source to share