{"size": 1192, "ext": "js", "max_stars_repo_path": "components/formBox.js", "max_stars_repo_name": "charles-carlson/planner", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "components/formBox.js", "max_issues_repo_name": "charles-carlson/planner", "max_issues_repo_issues_event_min_datetime": "2020-07-22T21:48:55.000Z", "max_issues_repo_issues_event_max_datetime": "2021-12-09T01:42:23.000Z", "max_forks_repo_path": "components/formBox.js", "max_forks_repo_name": "charles-carlson/planner", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 4, "max_forks_count": null, "avg_line_length": 41.1034482759, "max_line_length": 115, "alphanum_fraction": 0.5352348993}
import React from 'react'
import ReactDOM from 'react-dom';
const FormBox = ({inView,hide,setTodo,handleSubmit}) => inView ? ReactDOM.createPortal(
    <React.Fragment>
    <div className="form-overlay"/>
    <div className="form-wrapper" aria-modal aria-hidden tabIndex={-1} role="dialog">
        <div className="form">
            <div className="form-header">
                <button type="button" className="form-exit" data-dismiss="modal" aria-label="Close" onClick={hide}>
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form className="form-box-center" onSubmit={handleSubmit}>
                <div className="input-wrapper">
                    <label htmlFor="todo">Add a TODO</label>
                </div>
                <div className="input-wrapper">
                    <input type="text" id="todo" onChange={(e)=>setTodo(e.target.value)}/>
                </div>
                <div className="box">
                    <input type="submit" value="Confirm" />
                </div>    
            </form>
        </div>
    </div>
    </React.Fragment>, document.body
) : null;

export default FormBox;