{"size": 1282, "ext": "js", "max_stars_repo_path": "client/src/CharacterDetail.js", "max_stars_repo_name": "RKSouth/Character-Search-graphql", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "client/src/CharacterDetail.js", "max_issues_repo_name": "RKSouth/Character-Search-graphql", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "client/src/CharacterDetail.js", "max_forks_repo_name": "RKSouth/Character-Search-graphql", "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": 29.1363636364, "max_line_length": 112, "alphanum_fraction": 0.6287051482}
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { loadCharacter } from './requests';
import { AttackList } from './AttackList'
import './style.css';


export class CharacterDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {character: null};
    this.state = {attack: []};
  }

  async componentDidMount() {
    const {characterId} = this.props.match.params;
    const character = await loadCharacter(characterId);
    this.setState({character});
    const attack = [character.attack];
    this.setState({attack});
    console.log({character});
    console.log({attack})
  }

  render() {
    const {character} = this.state;
    // const {attack} = this.state;
    // prevent the problem if react tries to render the component when it's null
    if(!character) {
      return null;
    }
    return (
      <div>
        <h1 className="title">{character.name}</h1>
        <img className="characterImage" src={"../Images-char/" + character.image} alt={character.name}/>
        <h2 className="subtitle">
          <Link className="arenaClick" to={`/arenas/${character.arena.id}`}>Arena: {character.arena.name}</Link>
        </h2>
        <AttackList attack={character.attack}/>
      </div>
    );
  }
}
