How can I display the data of an array from an API? - reactjs

Question

i'm having a problem displaying the data from the punkbeer API and would appreciate any kind of help
import { useEffect, useState, Fragment } from 'react';
import { Switch, Link, Route, BrowserRouter as Router } from 'react-router-dom';
import React from 'react'
import '../Drink/drinks.css';
function Drinks() {
const [beer, setBeer] = useState('[]');
const [selectedBeer, setSelectedBeer] = useState("")
const fetchDrinks = function() {
fetch(`https://api.punkapi.com/v2/beers`)
.then( function(result) {
return result.json()
})
.then(function (data) {
setBeer(data)
data.forEach(beer => {
<div>
<div className="drink-img">
<img src="{beer.image_url}"/>
</div>
<div className="drink-title">
<h2>{beer.name}</h2> </div>
<div className="drink-tagline">
<h2>{beer.tagline}</h2> </div>
<div className="drink-food">
<h2>{beer.food_pairing}</h2> </div>
</div>
});
})
.catch(function () {
});
}
useEffect( function(){
fetchDrinks();
}, []);
return (
<div className="drink-container">
<div className="next">
<p>After you are picked your drink, click next to place your order </p>
<Link to="./Order">
<button className="btn" >Order</button>
</Link>
</div>
</div>
)
}
export default Drinks

Answer 1

You can save the return in variable/state.
Example you save in variabe that have name "data"
in view, you can add this
{data.map((value,index)=>{
return(
<div key={index}>
<div className="drink-img">
<img src="{value.image_url}"/>
</div>
<div className="drink-title">
<h2>{value.name}</h2> </div>
<div className="drink-tagline">
<h2>{value.tagline}</h2> </div>
<div className="drink-food">
<h2>{value.food_pairing}</h2> </div>
</div>
)}
)}