How to get specific data from api with condition

Question

Hello so i tried to make an website using Goole Books API. I want to get the listPrice from the object, but theres some of the book that doesnt have the listPrice in them. So for the example in object number 1 there is some code called saleability: "NOT_FOR_SALE" meanwhile object number 2 have and saleability: "FOR_SALE". If i tried to map the data, there is a error Uncaught TypeError: i.saleInfo.saleability.listPrice is undefined. How do you make spesific condition for this problem.

This is the code :

const CardBooks = (props) =>  {

    const url = "https://www.googleapis.com/books/v1/volumes?q=:keyes&key=AIzaSyDIwDev4gFHRqCh4SSaO9eLKEeI7oYt6aE&maxResults=27"
    const result = "&maxResults=40"
   
    const [bookHome, setBookHome] = useState([]);
    const [modalShow, setModalShow] = React.useState(false);
 
        useEffect( () => {
            axios
            .get(`${url}`)
            .then( (res) => {
                setBookHome(res?.data?.items)
                console.log(res?.data?.items)
            })
            .catch(console.error);
        }, [])
        
  
  return (
    <div>
    <Container fluid className='wrapper'>
            {bookHome && bookHome.map((i, index) => {
                return(
                <div className='image-container' key={index}>  
                  <div className="book read">

                    <div className="cover">
                    <img src={i.volumeInfo.imageLinks.thumbnail} />
                    </div>

                    <div className="info">
                      <h3 className="title">{i.volumeInfo.title}</h3>
                    </div>
                      
                    <Example 
                    thumbnail={i.volumeInfo.imageLinks.thumbnail}  
                    title={i.volumeInfo.title}
                    description={i.volumeInfo.description}
                    category={i.volumeInfo.categories}
                    page={i.volumeInfo.pageCount}
                    language={i.volumeInfo.language}
                    publisher={i.volumeInfo.publisher}
                    published={i.volumeInfo.publishedDate}
                    link={i.volumeInfo.previewLink}
                    epub={i.accessInfo.epub.isAvailable}
                    currency={i.saleInfo.saleability.listPrice.currencyCode}
                    price={i.saleInfo.saleability.listPrice.amount}
                    />
                  </div>
                </div>
                    )
                })}
    </Container>
    </div>
  )
}

export default CardBooks

Answer 1

Basically you just need a null/undefined check, a quick and dirty solution:

currency={i.saleInfo.saleability.listPrice ? i.saleInfo.saleability.listPrice.currencyCode : ''}

It's better to use conditional rendering and/or passing the whole object to the component and handling it inside.