Aftab Naveed Aftab Naveed - 1 month ago 10
Javascript Question

ES6 ReactJS Warning: React.createElement: type should not be null, undefined, boolean, or number

I am running into a strange issue while developing a ReactJS component everything works normal, but when I try to render my UserPage component inside ContentBody I get this error


react.js:18798 Warning: React.createElement: type should not be null,
undefined, boolean, or number. It should be a string (for DOM
elements) or a ReactClass (for composite components).


user.jsx Component



import Link from ‘react’


export default class UserPage extends React.Component {
function render() {
return(
<UserList />
);
}
}

class UserList extends React.Component {
function render() {
return(
{/* jsx code */}
);
}
}

class User extends React.Component {
function render() {
return(
<tr>

<td>{user.name}</td>
<td>{user.email}</td>
<td>{user.createdAt}</td>
<td>{user.updatedAt}</td>
<td>
<Link to="/api/user/delete">Delete</Link>
</td>
</tr>
);
}
}

##########################################
content-body.jsx file
/*————————————–-----------------*/
import UserPage from ‘./page/user.jsx’;

export default class ContentBody extends React.Component {

constructor(props) {
super(props)
this.state = {data: []};
}

render() {
return(

{/* This should be dynamic and replaced with Router */}

);
}
}


It still will throw that error, not sure what I am doing wrong here?

Update
I was able to fix the issue by importing the Link properly since Link is not an export default Link it should be imported as

import {Link} from 'react'

Answer

The default export of the react package is not Link, therefore you must import Link explicitly.

import { Link } from "react";

If you don't want to do this, import all of react:

import * as React from "react";

and then reference Link properly:

<React.Link to="/api/user/delete">Delete</React.Link>
Comments