{"size": 1291, "ext": "js", "max_stars_repo_path": "projects/remote-moving-motivators/src/components/NewSongPopoverForm.js", "max_stars_repo_name": "DEV3L/archive", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "projects/remote-moving-motivators/src/components/NewSongPopoverForm.js", "max_issues_repo_name": "DEV3L/archive", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "projects/remote-moving-motivators/src/components/NewSongPopoverForm.js", "max_forks_repo_name": "DEV3L/archive", "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": 23.0535714286, "max_line_length": 94, "alphanum_fraction": 0.5065840434}
import React, { Component } from 'react';

const newSongStyles = {
  padding: '10px',
};

class NewSongPopoverForm extends Component {
  constructor(props) {
    super(props);
    this.createSong = this.createSong.bind(this);
  }

  createSong(event) {
    event.preventDefault();

    const title = this.titleInput.value;
    this.props.addSong(title);

    this.songForm.reset();
    this.props.postSubmitHandler();
  }

  render() {
    return (
      <div style={newSongStyles}>
        <form onSubmit={event => this.createSong(event)} ref={form => (this.songForm = form)}>
          <label className="pt-label">
            Song Title
            <input
              style={{ width: '100%' }}
              className="pt-input"
              name="title"
              type="text"
              ref={input => {
                this.titleInput = input;
              }}
              placeholder="Don't Stop Believing"
            />
          </label>
          <input
            style={{ width: '100%' }}
            className="pt-button pt-intent-primary"
            type="submit"
            ref={input => {
              this.title = input;
            }}
            value="Create Song"
          />
        </form>
      </div>
    );
  }
}

export default NewSongPopoverForm;
