kawnayeen

// at app.js -- write a call back to update selectedVideo & provide that as props at VideoList
onVideoSelect={selectedVideo => this.setState({selectedVideo})}

// at video.list.js -- extract the callback from props and send that to VideoListItem
const onVideoSelect = props.onVideoSelect;
const videoList = videos.map( v => <VideoListItem onVideoSelect={onVideoSelect} key={v.etag} video={v} />);
                             
// at video.list.item.js -- call the call back
const VideoListItem = ({video, onVideoSelect})
<li className="list-group-item" onClick={() => onVideoSelect(video)}>

kawnayeen

// step one
const VideoDetail = ({video}) => {
    console.log("called here: "+video);
    if(!video) {
        return <div>Loading...</div>
    }
    const videoId = video.id.videoId;
    const url = `https://www.youtube.com/embed/${videoId}`;
    let {title, description} = video.snippet;
    return (

kawnayeen

// step one
const VideoListItem = ({video}) => {
    console.log(video);
    return (
        <li className="list-group-item">
            <div className="video-list media">
                <div className="media-left">
                    <img className="media-object" />
                </div>
                <div className="media-body">

kawnayeen

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

kawnayeen

// defining state
state = {
    videos: [],
    selectedVideo: null
};

// fetch video at startup
componentDidMount() {
    this.searchNewVideos('Caspian Report')
}

kawnayeen

class App extends Component {
    render() {
        return (
            <div>
                <SearchBar onSearchTermChange={term => this.onSearchTermChange(term)}/>
            </div>
        );
    }

    onSearchTermChange(term){

kawnayeen

// constructor
constructor() {
    super();
    this.employees = [
        {'name': 'Himel'},
        {'name': 'Rana'},
        {'name': 'Shuvro'},
        {'name': 'Proshad'}
    ];
}

kawnayeen

renderLogin() {
     if(this.state.loginVisible){
         return (
             <Login
                 visible={this.state.loginVisible}
                 titleBarApi={this.setTitleBar.bind(this)}
                 goToMemberList={this.goToMemberList.bind(this)}
             />
         );
     }

kawnayeen

import React from 'react';
import { Text, TouchableOpacity } from 'react-native';

const Button = ({ onPress, children }) => {
    const { buttonStyle, textStyle } = styles;

    return (
        <TouchableOpacity onPress={onPress} style={buttonStyle}>
            <Text style={textStyle}>
                {children}

kawnayeen

onEmailChange(text) {
    this.emailAddress = text;
}

<Input
    label="Email"
    placeholder="email@gmail.com"
    onChangeText={this.onEmailChange.bind(this)}
/>