{"size": 857, "ext": "js", "max_stars_repo_path": "examples/hideaway/src/components/Action.js", "max_stars_repo_name": "cinemaster/hideaway", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "examples/hideaway/src/components/Action.js", "max_issues_repo_name": "cinemaster/hideaway", "max_issues_repo_issues_event_min_datetime": "2020-05-02T15:54:22.000Z", "max_issues_repo_issues_event_max_datetime": "2021-07-19T09:47:01.000Z", "max_forks_repo_path": "examples/hideaway/src/components/Action.js", "max_forks_repo_name": "cinemaster/hideaway", "max_forks_repo_forks_event_min_datetime": "2020-08-20T08:56:12.000Z", "max_forks_repo_forks_event_max_datetime": "2020-11-11T04:47:46.000Z"}
{"max_stars_count": null, "max_issues_count": 5, "max_forks_count": 2, "avg_line_length": 22.5526315789, "max_line_length": 74, "alphanum_fraction": 0.5437572929}
import React, { useState } from 'react';

export const Action = ({
  xkcdId,
  imgUrl,
  onChangeInput,
  onClickLoad,
  onClickClean,
  onClickError,
  onClickImage,
}) => (
  <div>
    <div>
      <p>xkcd Id (1 ~ 1000)</p>
      <input
        type="number"
        min="1"
        max="100"
        value={xkcdId}
        onChange={onChangeInput}
        style={{ marginRight: 14 }}
      />
      <button onClick={onClickLoad} style={{ marginRight: 14 }}>
        Load data
      </button>
      <button onClick={onClickClean} style={{ marginRight: 14 }}>
        Clean data
      </button>
      <button onClick={onClickError} style={{ marginRight: 14 }}>
        Error
      </button>
      <button onClick={onClickImage}>Load Image</button>
    </div>
    <br />
    <div>{imgUrl ? <img src={imgUrl} width={670} /> : <>No Image</>}</div>
  </div>
);
