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

Question

Stuck with sample code from book learning. 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'. 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 by SO (there are couples with similar problems), but I could not figure out what was 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> ); } } 

Answer 1

You need to export CheckList

Change the class definition to:

 export default class CheckList extends Component{ 

Answer 2

Change the code as follows.

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> ); } }