ReactJS - Warning: React.createElement: type should not be null

Question

Stuck with sample code from book learning React. Code below throwing 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). Check the render method of 'Card'.. Checked SO (there are couple with similar issues) but I couldn't figure out what's wrong here.

import React, {Component} from 'react';
import {render} from 'react-dom';
import CheckList from './CheckList';

class Card extends Component {
    render() {
        return (
            <div className="card">
                <div className="card__title">{this.props.title}</div>
                <div className="card__details">
                    {this.props.description}
                    <CheckList cardId={this.props.id} tasks={this.props.tasks} />
                </div>
            </div>
        );
    }
}

CheckList.js

class CheckList extends Component{
    render(){
          let tasks = this.props.tasks.map((task)=>(
            <li className="checklist__task">
                <input type="checkbox" defaultChecked={task.done} />
                {task.name}

            </li>
        ));
        return (
            <div className="checklist">
                <ul>{tasks}</ul>
            </div>
        );
    }
}

seems works fine - jsfiddle.net/_alexander_/69z2wepo/34262

Oleksandr T.
– Oleksandr T.

2016-03-10 12:31:11 +00:00
Commented Mar 10, 2016 at 12:31 — Oleksandr T.
– Oleksandr T., Commented Mar 10, 2016 at 12:31

Nour Sammour · Accepted Answer · 2016-03-10 13:23:03Z

12

You need to export CheckList

Change your class definition to:

export default class CheckList extends Component{

answered Mar 10, 2016 at 13:23

Nour Sammour

2,8521 gold badge23 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bala Over a year ago

Aha. This is it. As soon as I did export default CheckList; this worked fine.

Ignatius Andrew · Accepted Answer · 2017-09-15 07:37:34Z

Change the code as following.

from

class CheckList extends Component{
    render(){
          let tasks = this.props.tasks.map((task)=>(
            <li className="checklist__task">
                <input type="checkbox" defaultChecked={task.done} />
                {task.name}

            </li>
        ));
        return (
            <div className="checklist">
                <ul>{tasks}</ul>
            </div>
        );
    }
}

export class CheckList

to

export default class CheckList extends Component{
    render(){
          let tasks = this.props.tasks.map((task)=>(
            <li className="checklist__task">
                <input type="checkbox" defaultChecked={task.done} />
                {task.name}

            </li>
        ));
        return (
            <div className="checklist">
                <ul>{tasks}</ul>
            </div>
        );
    }
}

Collectives™ on Stack Overflow

ReactJS - Warning: React.createElement: type should not be null

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related