import { useEffect, useState } from "react";
import {useParams} from "react-router-dom";
import styles from "../css/Detail.module.css";

function Detail() {
    const [detail, setDetail] = useState([]);
    const {id}= useParams();
    const [genres, setGenres] =useState([]);
    const getMovie = async() => {
         const json=await(
            await 
            fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`))
            .json();
            console.log(json);
            setDetail(json.data.movie);
            setGenres(json.data.movie.genres);
    };
    useEffect(()=>{
        getMovie();    
    },[]);
    console.log(detail.genres);
    console.log(genres);
    return (
        <div className={styles.detailBody}>
        <ul className={styles.genreList}>
          <div className={styles.genreListHeader}>Genre:</div>
          {genres.map((g,index)=>
          <li className={styles.genreListItem} key={index}>{g}</li>)}
        </ul>
        <a className={styles.link} href={detail.url}>Go to download!</a>  
        </div>
    );
}
export default Detail;

위와같이 코드를 짜서 api를 fetch 한 후에 usestate를 두가지를 사용하여 하나에는 json.data.movie, 나머지 하나에는 json.data.movie.genres를 각각의 value에 저장하였습니다. 그런데 li를 렌더링하는 

{genres.map((g,index)=>
          <li className={styles.genreListItem} key={index}>{g}</li>)}
이 부분에서 궁금한점이 생겼는데요. genres는 useState의 value로써 부른것인데 이를 detail.genres로 바꿔서 실행했더니 다음과 같은 오류가 뜹니다.

detail.genres와 genres(useState의 value)를 둘다 console.log()했을 때도 같은 것을 화면에 띄워주는 데 정작 map함수를 이용해서 li로 렌더링하려면 detail.genres를 이용했을 땐 오류가 발생합니다. 왜 이런 오류가 발생하는지 알고싶습니다.