{"size": 734, "ext": "js", "max_stars_repo_path": "client/components/Form.js", "max_stars_repo_name": "edmtrv/phonebook-monorepo", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "client/components/Form.js", "max_issues_repo_name": "edmtrv/phonebook-monorepo", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "client/components/Form.js", "max_forks_repo_name": "edmtrv/phonebook-monorepo", "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": 19.8378378378, "max_line_length": 52, "alphanum_fraction": 0.5027247956}
import React from 'react';

const Form = (props) => {
  const handleSubmit = (e) => {
    e.preventDefault();
    props.onNewData();
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="name-field">Name</label>
        <input
          onChange={props.onNameChange}
          value={props.name}
          id="name-field"
        />
      </div>
      <div>
        <label htmlFor="number-field">Number</label>
        <input
          onChange={props.onNumberChange}
          value={props.number}
          id="number-field"
        />
      </div>
      <div>
        <button id="submit-button" type="submit">
          Add
        </button>
      </div>
    </form>
  );
};

export default Form;
