Recipes.js

gistfile1.txt

import './App.css';
import {useState, useEffect} from 'react'
import {client} from './client'

function App() {

  const [recipes, setRecipes] = useState([])

  useEffect(() => {
    fetchContentful()
  }, [])

  const fetchContentful = () => {
    client.getEntries()
    .then(response => setRecipes(response.items))
  }

  console.log(recipes)

  return (
    <div className="App">
      
      {recipes.map(recipe => {
        return(
          <>
              <h1>{recipe.fields.title}</h1>
              <img src={recipe.fields.image.fields.file.url} height="100px" width='100px'/>
              {recipe.fields.ingredients.map(ingredient => {
                return(
                  <ul>
                    <li>{ingredient}</li>
                  </ul>
                )
              })}
          </>
        )
      })}
    </div>
  );
}

export default App;