React valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object

Question

I am building this simple react application, I encountered this error which I tried to debug but no joy yet. I am sure I must have been missing something important which may be quite obvious.

*Error: VideoDetail.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.*

index.js

import React, {
    Component
} from 'react';
import ReactDOM from 'react-dom';
import YTSearch from 'youtube-api-search';
import VideoDetail from './components/video_details';
const API_KEY = 'XXXXXXXXXXXXXXXXXXXXXXX';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            videos: []
        };
        YTSearch({
            key: API_KEY,
            term: 'cute cats'
        }, (videos) => {
            this.setState({
                videos
            }); 
        });
    }

    render() {
        return (
          <div >
            <VideoDetail video = {this.state.videos[0]}/> 
          </div>
        );
    }

}

ReactDOM.render( < App / > , document.querySelector('.container'));

video_details.js

import React from 'react';

const VideoDetail = ({ video }) => {
    if (!video) {
        return (
            <div>
                Loading...
            </div>
        );
    }
    const videoId = video.id.videoId;
    const url = `https://www.youtube.com/embed/${videoId}`;
    return
    (
        <div className='video-details col-md-8'>
            <div className='embed-responsive embed-responsive-16by9'>
                <iframe className='embed-responsive-item' src={url}> </iframe>
                <div className='details'>
                    <div> {video.snippet.title} </div>
                    <div> {video.snippet.description} </div>
                </div>
            </div>
        </div>

    );
}
module.exports = VideoDetail;

I must have been missing something that causes this error. What am I missing?

Answer 1

I found what the issue was. In video_details.js file, the second return I had, has nothing in front of it. So it should to be return ( instead. Leaving return on a single line without anything causes the error.

Answer 2

You forgot to import VideoDetail component.

Since you're already using ES6 use in the VideoDetail.js

export default VideoDetail;

and then import it:

import VideoDetail from "./VideoDetail";

Answer 3

The problem is with your VideoDetail react component. Your return statement's bracket is in the next line. Because of that you end up returning undefined. Which is not a valid react component, hence you get the error.

In a sense, your react component end up looking something like this.

function VideoDetail() {
  return
  <div></div>;
}

This is not a valid javascript return statement.

If you want the return to acknowledge your below code, the bracket has to state from the same line, enclosing the below code.

function VideoDetail() {
  return (
    <div></div>
);
}