React fetch - initial state not loading - what can I do? - reactjs

Question

I have started to learn react two days ago, so I am a complete newbie. I am attempting to create a simple website app that loads beer data (image, name, tagline) from a public API on cards. Upon clicking on the card, it should display description, name, tagline.
My problem is that upon initial load, no data loads - each card only loads after I click on it.after clicking one card twice
It was working fine before I introduced the clicking function and backFacingCard.
I tried several things, including making separate components for each card side but like I said, I am still very new to react and coding in general, so I am not sure if what I do is correct. I would be very grateful for any tips and tricks.
Here is my code for the card component:
const BeerTile = (props) => {
const frontFacingCard = {
src: (
<Card
hoverable
size="small"
style={{
width: 350,
height: 220,
}}
cover={
<img
className="beer_tile_card_img"
alt="beer-bottle"
src={props.beer?.image_url}
/>
}
>
<Meta
className="meta"
title={props.beer?.name}
description={props.beer?.tagline}
/>
</Card>
),
};
const backFacingCard = {
src: (
<Card
hoverable
size="small"
style={{
width: 350,
height: 220,
}}
cover={
<div className="beer-description">{props.beer?.description}</div>
}
>
<Meta
className="meta"
title={props.beer?.name}
description={props.beer?.tagline}
/>
</Card>
),
};
const [card, setCard] = useState(frontFacingCard.src);
const [showsFront, setShowsFront] = useState(true);
const clickHandler = () => {
if (showsFront) {
setCard(backFacingCard.src);
setShowsFront(false);
props.frontSide(showsFront);
} else {
setCard(frontFacingCard.src);
setShowsFront(true);
props.frontSide(showsFront);
}
};
return (
<div
className="beer_tile_card"
onClick={clickHandler}
front={showsFront ? 1 : 0}
>
{card}
</div>
);
};

Answer 1

in your second component you can use useEffect
const [card, setCard] = useState(frontFacingCard.src);
const [showsFront, setShowsFront] = useState(true);
useEffect(()=>{
console.log("frontFacingCard.src",frontFacingCard.src)//check if source is available
setCard(frontFacingCard.src)
},[frontFacingCard.src])
const clickHandler = () => {
if (showsFront) {
setCard(backFacingCard.src);
setShowsFront(false);
props.frontSide(showsFront);
} else {
setCard(frontFacingCard.src);
setShowsFront(true);
props.frontSide(showsFront);
}
};
return (
<div
className="beer_tile_card"
onClick={clickHandler}
front={showsFront ? 1 : 0}
>
{card}
</div>
);
};

Answer 2

you can do this alternate solution
const BeerTile = (props) => {
const FrontFacingCard = () => {
return (
<Card
hoverable
size="small"
style={{
width: 350,
height: 220,
}}
cover={
<img
className="beer_tile_card_img"
alt="beer-bottle"
src={props.beer?.image_url}
/>
}
>
<Meta
className="meta"
title={props.beer?.name}
description={props.beer?.tagline}
/>
</Card>
)
};
const BackFacingCard =()=> {
return (
<Card
hoverable
size="small"
style={{
width: 350,
height: 220,
}}
cover={
<div className="beer-description">{props.beer?.description}</div>
}
>
<Meta
className="meta"
title={props.beer?.name}
description={props.beer?.tagline}
/>
</Card>
)
};
const [showsFront, setShowsFront] = useState(true);
const clickHandler = () => {
setShowsFront(!showFront);
props.frontSide(showsFront);
};
return (
<div
className="beer_tile_card"
onClick={clickHandler}
front={showsFront ? 1 : 0}
>
{
showsFront
? <FrontFacingCard />
: <BackFacingCard />
}
</div>
);
};

Answer 3

Checkout this cleaner solution, that separate back,front and Tile.
const BeerTile = (props) => {
const [front, setFront] = useState(true);
const clickHandler = () => {
setFront(!front)
};
return (
<div
className="beer_tile_card"
onClick={clickHandler}
front={showsFront ? 1 : 0}
>
{front?<FrontFacingCard {...props}/>:<BackFacingCard {...props}/> }
</div>
);
};
const FrontFacingCard=(props)=>
(
<Card
hoverable
size="small"
style={{
width: 350,
height: 220,
}}
cover={
<img
className="beer_tile_card_img"
alt="beer-bottle"
src={props.beer?.image_url}
/>
}
>
<Meta
className="meta"
title={props.beer?.name}
description={props.beer?.tagline}
/>
</Card>
),
};
const BackFacingCard =( props)=>(
<Card
hoverable
size="small"
style={{
width: 350,
height: 220,
}}
cover={
<div className="beer-description">{props.beer?.description}</div>
}
>
<Meta
className="meta"
title={props.beer?.name}
description={props.beer?.tagline}
/>
</Card>
);