{"size": 807, "ext": "js", "max_stars_repo_path": "src/components/search_bar.js", "max_stars_repo_name": "HabibulHH/youtubeClone", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/search_bar.js", "max_issues_repo_name": "HabibulHH/youtubeClone", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/search_bar.js", "max_forks_repo_name": "HabibulHH/youtubeClone", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 20.6923076923, "max_line_length": 79, "alphanum_fraction": 0.5043370508}
import React,{Component} from 'react';
class  SearchBar extends Component{

    constructor (props){

        super(props);
        this.state={term:''}
        this.onInputChange.bind(this);
    }

    onInputChange(term){

        this.setState({term});
        this.props.onSearchTermChnage(term);
        
   
    }
    
    render(){
        const pStyle = {
            'marginTop': '30px',
            'marginBottom': '20px',
            'textAlign': 'left'
          };
          
        return (
        
            <div>
        <input style={pStyle} className="col-md-6 form-control form-control-lg"
         onChange={event=>{this.onInputChange(event.target.value)}}type="text" 
         value={this.state.term}/>

           </div>        
        );  
    }
    
}

export default SearchBar;