React Invariant violation error in my component

Question

I am learning ReactJS and in attempting to render Youtube API data into a component, I stumble upon the following warnings and errors. I am trying to understand what is the cause behind them, but I am clueless as to what is happening.

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 App.

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of App.

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 App.

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of App.

Uncaught TypeError: Cannot read property 'props' of undefined

The code I am working with which is problematic is below. I am convinced that this has got to do with my App component and how I have setup my props object, but I cannot pinpoint the source of the problem.

index.js

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import SearchBar from './components/search_bar';
import YTSearch from 'youtube-api-search';
import VideoList from './components/video_list';

const API_KEY = "not showing the real key here for obvious reasons"; 

class App extends Component {
    constructor(props){
        super(props);

        this.state = {videos: []};

        YTSearch({key: API_KEY, term: 'sufboards'}, (videos) => { 
            this.setState({videos});
        });
    }
    render(){
        return (
            <div>
                <SearchBar />
                <VideoList videos={this.state.videos} />
            </div>
        );
    }
}
ReactDOM.render(<App />, document.querySelector(".container"));

video_detail.js

import React from 'react';

const VideoList = (props) => {
    return (
        <ul className="col-md-4 list-group">
            {props.videos.length}
        </ul>
    );
};

export default VideoList;

search_bar.js

import React, {Component} from 'react';

class SearchBar extends Component {
    constructor(props){
        super(props);
        this.state = {term: ""};
    }

    render(){
        return (
            <input
                onChange={
                    event => this.setState({
                        term: event.target.value
                    })
                }
                value = {this.state.term}
            />
        );
    }
}

export default SearchBar;

maybe its because of invalid html? you are rendering a ul with no li's you should change how you render that. map over the elements and render a li for each video or just change the ul to a div for now to test it — John Ruddell
@JohnRuddell sadly it's a lot simpler Take a look at my file names. I am importing from video_list, but I mistakenly out the code in video_detail. Fml — AGE

AGE AGE · Accepted Answer · 2016-04-28T05:51:49

Simple fix:

import VideoList from './components/video_list';

The file was empty, my code was in video_detail.js so I had to move it to the correct file, video_list.js

React Invariant violation error in my component

index.js

video_detail.js

1 Answers