working on a project using the Brewdog API which will render the different beers info in cards with their info. However I can't work out why the card components won't render. Any thoughts/help would be greatly suggested!
The API has fetched the data in the App.jsx and pass it down through props through CardArea all the way down the tree to card. The React Devtools show that the state has passed through the array of beer objects and i'm not getting any compiling errors or console errors.
Thank you in advance!
APP.JSX
import { useState, useEffect } from 'react'
import NavBar from "./components/NavBar";
import CardArea from "./components/CardArea";
const App = () => {
const [beers, setBeers] = useState([])
const getBeerData = () => {
const API_URL = "https://api.punkapi.com/v2/beers"
fetch(API_URL)
.then((res) => res.json())
.then((jsonResponse) => {
setBeers(jsonResponse)
})
}
useEffect(() => {
getBeerData()
}, [])
return (
<>
<main className={styles.main}>
<NavBar />
<CardArea beers={beers}/>
</main>
</>
);
}
export default App;
CardArea
import styles from './CardArea.module.scss'
import CardList from '../CardList/CardList'
import NotFound from '../NotFound/NotFound'
const CardArea = (props) => {
const { beers } = props;
const contentJsx = beers.length ? (
<CardList beers={beers} />
) : (
<NotFound />
);
return <section className={styles.cardArea}>{contentJsx}</section>
}
export default CardArea;
CardList
import Card from '../Card/Card'
import styles from './CardList.module.scss'
const CardList = (props) => {
const { beers } = props;
const getBeerCardsJsx = (beer) => {
<div className={styles.card} key={beer.id}>
<Card beer={beer} />
</div>
}
return <section className={styles.cards}> {beers.map(getBeerCardsJsx)} </section>
}
export default CardList
Card.JSX
import React from 'react'
import styles from './Card.module.scss'
const Card = (props) => {
const { name, tagline, abv, description } = props.beer;
return (
<div className={styles.card}>
<img className={styles.img} alt={name}></img>
<section>
<h1>{name}</h1>
<h4>{tagline}</h4>
<p>ABV: {abv}%</p>
<p>{description}</p>
</section>
</div>
)
}
export default Card
In your getBeerCardsJsx function, you're missing a return statement because your arrow function uses curly braces and you don't have an explicit return statement (the arrow bracket doesn't have implicit return whenever you use curly braces). Thus, the function ends up returning undefined, which React treats as nothing so you don't see anything rendered nor any errors.
To fix this issue, either replace the curly brackets with round brackets:
import Card from '../Card/Card'
import styles from './CardList.module.scss'
const CardList = (props) => {
const { beers } = props;
const getBeerCardsJsx = (beer) => ( // instead of {
<div className={styles.card} key={beer.id}>
<Card beer={beer} />
</div>
) // instead of }
return <section className={styles.cards}> {beers.map(getBeerCardsJsx)} </section>
}
export default CardList
Or you can add an explicit return statement:
import Card from '../Card/Card'
import styles from './CardList.module.scss'
const CardList = (props) => {
const { beers } = props;
const getBeerCardsJsx = (beer) => {
return (
<div className={styles.card} key={beer.id}>
<Card beer={beer} />
</div>
)
}
return <section className={styles.cards}> {beers.map(getBeerCardsJsx)} </section>
}
export default CardList
Missing return keyword in getBeerCardsJsx function