CODEWITHSUNDEEP
javascriptecmascript-6reactjs
Aftab Naveed
Aftab Naveed

Reputation: 3869

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'

Upvotes: 1

Views: 156

Answers (1)

James Monger
James Monger

Reputation: 10665

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>

Upvotes: 1

Related Questions