How to convert recipe to calories per serving

Question

I am creating a react recipe app. I am using an Edamam API (food recipes). How do I convert/calculate recipe calories to calories amount per serving? Maybe round it to the whole number?

Right now the components in my browser, Chrome Developer tools, looked like this: props

{
    calories:3033.2012500008163
    image:"https://www.edamam.com/web-img/e12/e12b8c5581226d7639168f41d126f2ff.jpg"
    ingredients: [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]
    title:"Chicken Paprikash"
    new entry:  ""
}

APP.JS (partial)

<div className="recipe-section">
        {recipes.map((recipe) => (
          //label ---- title
          <Recipe
            key={recipe.recipe.label} // cba ge it
            title={recipe.recipe.label}
            calories={recipe.recipe.calories}
            image={recipe.recipe.image}
            ingredients={recipe.recipe.ingredients}
          />
        ))}
      </div>

RECIPE.JS

import React from "react";
import style from "./recipe.module.css";

const Recipe = ({ title, calories, image, ingredients }) => {
  return (
    <div className={style.recipe}>
      <h1> {title} </h1>
      <ol>
        {ingredients.map((ingredient) => (
          <ul> {ingredient.text} </ul>
        ))}
      </ol>
      <p> {calories} </p>
      <img className={style.picture} src={image} alt="" />
    </div>
  );
};

export default Recipe;

Thank you. If you need more information please let me know!

score 2 · Answer 1 · answered Dec 08 '20 at 04:09

You have two options:

you can control the way that the data is being rendered and round the number of calories during the render function, this way you keep the object of Recipe honest to its original fetched data:

const Recipe = ({ title, calories, image, ingredients }) => {
  return (
    <div className={style.recipe}>
      <h1> {title} </h1>
      <ol>
        {ingredients.map((ingredient) => (
          <ul> {ingredient.text} </ul>
        ))}
      </ol>
      <p> {Math.round(calories)} </p>
      <img className={style.picture} src={image} alt="" />
    </div>
  );
};

In case you don't care about the honesty of the data received, you can round it when being fetched:

          <Recipe
            key={recipe.recipe.label} // cba ge it
            title={recipe.recipe.label}
            calories={Math.round(recipe.recipe.calories)}
            image={recipe.recipe.image}
            ingredients={recipe.recipe.ingredients}
          />

How to convert recipe to calories per serving

1 Answers1