CODEWITHSUNDEEP
reactjs
Vivek Modi
Vivek Modi

Reputation: 39

Cannot find module "./components/video_list"

I am making youtube-search app. i have three component index for head component and rest two are: 1-video_list 2-video_item

coding for index.js

import React,{Component} from 'react';
import ReactDOM from 'react-DOM';
import Search from './components/search';
import Video_list from './components/video_list';
import YTSearch from 'youtube-api-search';
const  API_KEY="xxxxxxxxxxxxxx";


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

    this.state = {
      videos:[]
    };
    YTSearch({key:API_KEY,term:'hitesh choudhary'},(videos) => {
      this.setState({videos});
    });

  }
  render(){
    return(
      <div>
        <Search />
        <Video_list videos={this.state.videos} />
      </div>
    );
  }
}

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

code for video_list

    import React,{Component} from 'react';
import VideoListItem from './video_item';


class video_list extends Component {
  const videoItem = this.props.videos.map((video) => {
    return <VideoListItem video={video} />;
  });
  render(){
    return(
      <div>
        <ul className="col-md-4 list-group">
          {videoItem}
        </ul>
      </div>
    );
  }
}
export default video_list;

code for video_item.js

    import React,{Component} from 'react';

class video_item extends Component {
  render(){
    return(
      <li>{this.props.video}</li>
    );
  }
}

export default video_item;

console showing me Cannot find module "./components/video_list"

Upvotes: 1

Views: 855

Answers (1)

dance2die
dance2die

Reputation: 36915

You need to capitalize component names in React or else JSX will consider them as HTML tags.

Declare components as

class VideoList

and 

class VideoItem

Refer to the official documentation JSX in Depth for more details.

Upvotes: 1

Related Questions