{"size": 1272, "ext": "js", "max_stars_repo_path": "src/pages/Characters/Characters.js", "max_stars_repo_name": "rengi46/react-rick-morty", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/pages/Characters/Characters.js", "max_issues_repo_name": "rengi46/react-rick-morty", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/pages/Characters/Characters.js", "max_forks_repo_name": "rengi46/react-rick-morty", "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": 28.9090909091, "max_line_length": 70, "alphanum_fraction": 0.5676100629}
import { useContext, useEffect } from "react";
import { useParams } from "react-router-dom";
import Layout from "../../components/Layout";
import { HomeContext } from "../../context/HomeContext";
import EpisodeCard from "../../components/EpisodeCard/EpisodeCard";

const Character = () => {
  const ruta = useParams()
  const {id} = ruta
  const data = useContext(HomeContext)
  const {getCharacter, character,episode} = data
  useEffect(async()=>{
    await getCharacter(id)
  },[])
  console.log(character);
  return ( 
    <Layout>
    <section className="row">
      <div className="col col-12">
      <img src={character.image} alt="img charcter" />
      <h1>{character.name}</h1>
      <hr/>
      <h3>Character</h3>
      <p>{character.species}|{character.status}</p>
      <div>
          <h3>Origin</h3>
          <p>{ (character.origin)? character.origin.name :"" }</p>
          <h3>Location</h3>
          <p>{ (character.location)? character.location.name :"" }</p>
      </div>
        {episode.map((hom) => (
           <EpisodeCard  
            id={ hom.id}
            name={hom.name}
            airDate={hom.air_date}
            episode={hom.episode}
            />
        ))}
      </div>
    </section>
  </Layout>
  );
}
export default Character;