1

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'
1
  • Answer in an answer, not in the question-thanks :) Commented Oct 15, 2016 at 23:12

1 Answer 1

1

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>
Sign up to request clarification or add additional context in comments.

1 Comment

I figured it out and updated my question, but your answer is more explicit therefore will accept it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.