{"size": 708, "ext": "js", "max_stars_repo_path": "src/components/HeroDetail.js", "max_stars_repo_name": "coryhouse/react-tour-of-heroes", "max_stars_repo_stars_event_min_datetime": "2016-01-04T02:53:07.000Z", "max_stars_repo_stars_event_max_datetime": "2020-08-20T11:04:22.000Z", "max_issues_repo_path": "src/components/HeroDetail.js", "max_issues_repo_name": "slimlime/react-tour-of-heroes", "max_issues_repo_issues_event_min_datetime": "2016-01-07T13:23:20.000Z", "max_issues_repo_issues_event_max_datetime": "2016-01-07T13:23:20.000Z", "max_forks_repo_path": "src/components/HeroDetail.js", "max_forks_repo_name": "slimlime/react-tour-of-heroes", "max_forks_repo_forks_event_min_datetime": "2016-01-06T04:15:28.000Z", "max_forks_repo_forks_event_max_datetime": "2019-10-09T19:42:25.000Z"}
{"max_stars_count": 63, "max_issues_count": 1, "max_forks_count": 19, "avg_line_length": 20.8235294118, "max_line_length": 100, "alphanum_fraction": 0.6129943503}
import React, {PropTypes} from 'react';

class HeroDetail extends React.Component {
  constructor(props) {
    super(props);
  }

  onHeroNameChange(e) {
    this.props.actions.changeName(this.props.hero.id, e.target.value);
  }

  render() {
    let hero = this.props.hero;

    return (
      <div>
        <h2>{hero.name} details!</h2>
        <div><label>id:</label> {hero.id}</div>
        <div>
          <label>name: </label>
          <input value={hero.name} onChange={this.onHeroNameChange.bind(this)} placeholder="name" />
        </div>
      </div>
    );
  }
}

HeroDetail.propTypes = {
  hero: PropTypes.object.isRequired,
  actions: PropTypes.object.isRequired
};

export default HeroDetail;
