{"size": 1181, "ext": "js", "max_stars_repo_path": "client/src/components/NotesBody/notesBody.js", "max_stars_repo_name": "mesgt/charizard", "max_stars_repo_stars_event_min_datetime": "2021-03-17T15:12:08.000Z", "max_stars_repo_stars_event_max_datetime": "2021-03-17T15:12:08.000Z", "max_issues_repo_path": "client/src/components/NotesBody/notesBody.js", "max_issues_repo_name": "mesgt/charizard", "max_issues_repo_issues_event_min_datetime": "2021-03-12T19:30:47.000Z", "max_issues_repo_issues_event_max_datetime": "2021-03-12T19:36:52.000Z", "max_forks_repo_path": "client/src/components/NotesBody/notesBody.js", "max_forks_repo_name": "mesgt/charizard", "max_forks_repo_forks_event_min_datetime": "2021-03-22T14:09:36.000Z", "max_forks_repo_forks_event_max_datetime": "2021-03-22T14:09:36.000Z"}
{"max_stars_count": 1, "max_issues_count": 2, "max_forks_count": 1, "avg_line_length": 23.1568627451, "max_line_length": 67, "alphanum_fraction": 0.5207451312}
import React from "react";

const NotesBody = ({ onUpdateNote, activeNoteData }) => {
  const [title, setTitle] = React.useState("");
  const [body, setBody] = React.useState("");

  const onEditField = (field, target) => {
    console.log(target.id);

    if (field === "title") {
      setTitle(target.value);
    } else if (field === "body") {
      setBody(target.value);
    }
    if (target.id === "") {
      onUpdateNote({
        title,
        body,
      });
    } else {
      onUpdateNote({
        title,
        body,
        id: target.id,
      });
    }
  };

  return (
    <div className="app-main">
      <div className="app-main-note-edit">
        <input
          type="text"
          id={activeNoteData.id} //was _id but react didn't like it
          placeholder="Note Title"
          value={title || activeNoteData.title}
          onChange={(e) => onEditField("title", e.target)}
          autoFocus
        />
        <textarea
          placeholder="Write your note here..."
          value={body || activeNoteData.body}
          onChange={(e) => onEditField("body", e.target)}
        />
      </div>
    </div>
  );
};

export default NotesBody;
