{"size": 677, "ext": "js", "max_stars_repo_path": "video-app-hooks/src/components/SearchBar.js", "max_stars_repo_name": "tokurgit/react-video-app-hooks", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "video-app-hooks/src/components/SearchBar.js", "max_issues_repo_name": "tokurgit/react-video-app-hooks", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "video-app-hooks/src/components/SearchBar.js", "max_forks_repo_name": "tokurgit/react-video-app-hooks", "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": 25.0740740741, "max_line_length": 96, "alphanum_fraction": 0.4697193501}
import React, { useState } from 'react';

const SearchBar = ({onFormSubmit}) =>
{
    const [term, setTerm] = useState('');

    const onSubmit = (e) =>
    {
        e.preventDefault();
        onFormSubmit(term);
    }

    return (
        <div className=" search-bar ui segment">
            <form className="ui form" onSubmit={onSubmit}>
                <div className="field">
                    <label>
                        <h1>Video Search</h1>
                    </label>
                    <input type='text' value={term} onChange={(e) => setTerm(e.target.value)} />
                </div>
            </form>
        </div>
    );
};

export default SearchBar;