import React, {useEffect, useState} from 'react'
import axios from 'axios'

const Books = () => {

const [books, setBooks] = useState(null);
const [error, setError] = useState(null);
const [loading, setLoading] = useState(null);

useEffect(() => {
const booksLoding = async () => {
try {
setError(null);
setBooks(null);
setLoading(true);
const response = await axios.get("api/test");
setBooks([response])
// const asd = books.map(book => {return <li key={book.id}>{book}</li>})
// const asd = books.map(book => <li key={book.id}>{book}</li>)
// if(books != 'undefined' && books != null) {
// const booksList = books.map((book, index)=> {
// <li key={index}>{book}</li>
// })}
} catch (e) {
setError(e);
}
setLoading(false);
}
booksLoding()
}, []);

if (loading) return <div>로딩중..</div>;
if (error) return <div>에러가 발생했습니다</div>;
if (!books) return null;

// const booksList = books.map((book) => <li>{book}</li>);
const click = () => {
// axios.get("api/test").then((res) => setBooks(res.data));
console.dir(books)
console.log(books)
// const asd = books.map(book => {return <li key={book.id}>{book}</li>})
// console.log(asd)
// console.log(booksList)
}

// const booksList = books && books.product.map(book => booksList.push(book));
return (
<>
<div>
{/* <button onClick={click}>asd</button> */}
<ul>
{books ? books.map(book => {<li key={book.id}>{book}</li>}) : "bay"}
</ul>
</div>
</>
);
}

export default Books


왜 맵으로 열었는데 안나오져 ㅠㅠ