Calorie Intake Estimator

This is a project I built for a couple of reasons. Number 1 being just more practice with React with a focus on state management, data flow, and a controlled form component where the input value data is managed by state instead of the browser. Also this is something that I would use and have used in the past when trying to figure out how many calories I should be eating.

*This could have been built with vanilla js I’m sure

To figure this out I used the Mifflin-St Jeor Equation to predict daily energy expenditure in healthy adults.

A few methods used :

Managed global state from parent component

Or better known as “lifting the state up”. Keeping with React best practices I lifted the formData state up for 1 way data flow.

function App() {
    /* Managed state from parent component */
    const [formData, setFormData] = useState({
        name: "",
        age: '',
        sex: '',
        height: '',
        weight: '',
        activity: '',
        goals: '',
    });

I then pass the data into the child component as props :

<Form formData={formData} setFormData={setFormData} onSubmit={handleFormSubmit} 

Dynamic Access with Objects using bracket notation

const activityMultipliers = {
        sedentary : 1.2,
        light : 1.375,
        moderately : 1.55,
        very : 1.725,
        super_active : 1.9
    }

    const activityLevel = activity;

    if (activityMultipliers[activityLevel]){
        BMR = BMR * activityMultipliers[activityLevel];
    } else return;

Object Destructuring

const data = {
    age: 25,
    sex: "male",
    height: 175,
    weight: 70,
    activity: "moderate"
};

const { age, sex, height, weight, activity } = data;
// Renaming during destructuring
const { age: userAge, sex: userSex, height: userHeight } = data;