javascript - TypeError: Cannot read property 'snippet' of undefined -


i have following 2 classes. think main problem here render function passes initial states instead of updated states updated of ytsearch api. if print information videos on console, receive relevant information searched query in terms of object. when passing these objects new component (title) seems undefined (null).

index.js

import react 'react'; import reactdom 'react-dom'; import { component } 'react'; import youtube './youtube'; import title './title'; import ytsearch 'youtube-api-search';  const key = '************************************';  class youtubevideo extends react.component {   constructor(props) {     super(props);     this.state = {video:'', selectedvideo:'', received: false};     this.getvideos();   }    getvideos() {     ytsearch({key: key, term: 'football'}, (videos) => {         this.setstate({             videos: videos,             selectedvideo: videos[0],             received : true             });         });   }    render() {         if (this.state.received){             return (                 <title videotitle={ this.state.selectedvideo }/>             )         }         return (             <div>             </div>         )   } }  reactdom.render(     <youtubevideo />,     document.getelementbyid('root') ); 

title.js

import react, { component } 'react';   class title extends component {      render () {     const video = this.props.videotitle;         return (             <div>                 <div>{ this.video.snippet }</div>                 <div>{ this.video.snippet }</div>             </div>         )     } }  export default title; 

i following error in title.js:

typeerror: cannot read property 'snippet' of undefined 

please help.

  1. in title.js, use {video.snippet} not this.video.snippet.
  2. you can use react component life cycle methods call getvideos() method.

Comments

Popular posts from this blog

angular - Ionic slides - dynamically add slides before and after -

minify - Minimizing css files -

Add a dynamic header in angular 2 http provider -