{"size": 957, "ext": "js", "max_stars_repo_path": "src/Room/Note/Note.js", "max_stars_repo_name": "jakejonggubaek/to-do-list-for-group-app", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/Room/Note/Note.js", "max_issues_repo_name": "jakejonggubaek/to-do-list-for-group-app", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/Room/Note/Note.js", "max_forks_repo_name": "jakejonggubaek/to-do-list-for-group-app", "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.1842105263, "max_line_length": 122, "alphanum_fraction": 0.5245559039}
import { useState } from 'react';

const Note = () => {

    const [note, setNote] = useState(localStorage.getItem('note'));

    const handleChange = (e) => {
        setNote(e.target.value);
    }

    const handleSubmit = (e) => {
        e.preventDefault();
        localStorage.setItem('note', note);
    }

    const handleDelete = (e) => {
        e.preventDefault();
        localStorage.setItem('note', '');
        setNote('');
    }


    return (
        <div className="note">
            <h3>personal note (not shared)</h3>
            <form action="">
                <textarea className="text-area" type="textarea" rows="16" onChange={handleChange} value={note}></textarea>
            </form>
            <div className='button-container'>
                <button onClick={handleSubmit}>Save</button>
                <button onClick={handleDelete}>Delete</button>
            </div>
            
        </div>
    )
}

export default Note;