blog-things-to-avoid-when-using-react-hooks-1.js

import React, { useEffect, useState } from "react";

function Character({ id }) {
  /** Move this! */
  // if (!id) {
  //  return "Please select a game to fetch";
  // }
  const [character, setCharacter] = useState({
    name: "",
    description: ""
  });
  
  const fetchCharacter = async () => {
    const response = await fetch(`https://swapi.dev/api/people/${id}`);
    const data = await response.json();
    console.log("here");
    setCharacter(data);
  };
  
  useEffect(() => {
    if (id) {
      fetchCharacter();
    }
  }, [id]);
  
  /** to here */
  if (!id) {
    return "Please select a game to fetch";
  }
  
  return (
    <main>
      <h2>{character.name}</h2>
      <div>Name: {character.birth_year}</div>
      <div>Height: {character.height}</div>
    </main>
  );
}

export default Character;