How do I convert my react js class component to a functional component?

Question

Hi I've been trying to do this for a while but there are a few things I cant quite iron out, so here's what I've done so far.

original class components:

import React, { Component, useContext } from 'react';
import PancakeImage from '../assets/Pancakes.jpg';
import OmeletteImage from '../assets/Omelette.jpg';
import WrapImage from '../assets/Wrap.jpg';
import SpagettiImage from '../assets/Spagetti.jpg';
import { GlobalContext } from '../context/GlobalState';


import CancelIcon from '@material-ui/icons/Cancel';
import Gainimg from '../assets/Gain.svg'
import Recompimg from '../assets/Recomp.svg'
import Loseimg from '../assets/Lose.svg'

export class Main_page extends Component {


    constructor(props) {
        super(props);
        this.state = {
            healthData: (JSON.parse(localStorage.getItem('user_data')))
        }
    }

    state = {
        mealOne_box: false,
        mealTwo_box: false,
        mealThree_box: false,
        mealFour_box: false,
        gainImage: false,
        recompImage: false,
        loseImage: false
    }

    componentDidMount() {
        this.GoalChecker();
        console.log(this.state.healthData);
    }

    GoalChecker() {
        if (this.state.healthData !== null) {

            if (this.state.healthData.goal === 'Gain') {
                this.setState({ gainImage: true });
                this.setState({ recompImage: false });
                this.setState({ loseImage: false });
            }

            if (this.state.healthData.goal === 'Recomp') {
                this.setState({ gainImage: false });
                this.setState({ recompImage: true });
                this.setState({ loseImage: false });
            }

            if (this.state.healthData.goal === 'Lose') {
                this.setState({ gainImage: false });
                this.setState({ recompImage: false });
                this.setState({ loseImage: true });
            }
        }
    };

    //handles clicks for meal one
    mealOneClickHandler = (event) => {
        this.setState({ mealOne_box: true });
    };

    mealOne_boxClickHandler = (event) => {
        this.setState({ mealOne_box: false });
    };

    //handles clicks for meal two
    mealTwoClickHandler = (event) => {
        this.setState({ mealTwo_box: true });
    };

    mealTwo_boxClickHandler = (event) => {
        this.setState({ mealTwo_box: false });
    };

    //handles clicks for meal three
    mealThreeClickHandler = (event) => {
        this.setState({ mealThree_box: true });
    };

    mealThree_boxClickHandler = (event) => {
        this.setState({ mealThree_box: false });
    };

    //handles clicks for meal Four
    mealFourClickHandler = (event) => {
        this.setState({ mealFour_box: true });
    };

    mealFour_boxClickHandler = (event) => {
        this.setState({ mealFour_box: false });
    };

    render() {


        //setting meal more information on click
        let mealOne;
        let mealTwo;
        let mealThree;
        let mealFour;

        if (this.state.mealOne_box) {
            mealOne = (
                <div className='meal_popup'>
                    <div className='meal_popupElement'>
                        <CancelIcon onClick={this.mealOne_boxClickHandler} />
                        <img src={PancakeImage} />
                        <p>testing1</p>
                    </div>
                    <div onClick={this.mealOne_boxClickHandler} className='meal_popupBackground' />
                </div>
            )
        };

        if (this.state.mealTwo_box) {
            mealTwo = (
                <div className='meal_popup'>
                    <div className='meal_popupElement'>
                        <CancelIcon onClick={this.mealTwo_boxClickHandler} />
                        <img src={OmeletteImage} />
                        <p>testing2</p>
                    </div>
                    <div onClick={this.mealTwo_boxClickHandler} className='meal_popupBackground' />
                </div>
            )
        };

        if (this.state.mealThree_box) {
            mealThree = (
                <div className='meal_popup'>
                    <div className='meal_popupElement'>
                        <CancelIcon onClick={this.mealThree_boxClickHandler} />
                        <img src={WrapImage} />
                        <p>testing3</p>
                    </div>
                    <div onClick={this.mealThree_boxClickHandler} className='meal_popupBackground' />
                </div>
            )
        };

        if (this.state.mealFour_box) {
            mealFour = (
                <div className='meal_popup'>
                    <div className='meal_popupElement'>
                        <CancelIcon onClick={this.mealFour_boxClickHandler} />
                        <img src={SpagettiImage} />
                        <p>testing4</p>
                    </div>
                    <div onClick={this.mealFour_boxClickHandler} className='meal_popupBackground' />
                </div>
            )
        };


        /*<p className='food_text'>age: {healthData.age}</p>
        <p className='food_text'>gender: {healthData.gender}</p>
        <p className='food_text'>goal: {healthData.goal}</p>
        <p className='food_text'>height: {healthData.height}</p>
        <p className='food_text'>weight: {healthData.weight}</p>*/

        //gets users data and renders it to <p> items
        const healthData = this.state.healthData;
        let weight

        if (healthData !== null) {
            if (healthData.units === 'lbs') {
                weight = Math.floor(healthData.weight / 2.2)
            } else {
                weight = healthData.weight
            }
        }

        return healthData == null ? "" : (
            <div className='main_Main'>
                <div className='App_margin' />


                <div className='statusbar'>
                    <div className='Goaldiv'>
                        <p>Goal: {healthData.goal}</p>
                        {this.state.gainImage ? <img src={Gainimg} /> : null}

                        {this.state.recompImage ? <img src={Recompimg} /> : null}

                        {this.state.loseImage ? <img src={Loseimg} /> : null}

                    </div>

                    <div className='testDiv'><p>Age: {healthData.age}</p></div>

                    <div className='testDiv1'><p>Gender: {healthData.gender}</p></div>

                    <div className='testDiv2'><p>weight: {weight}Kg</p></div>
                </div>

                {mealOne}
                {mealTwo}
                {mealThree}
                {mealFour}

                <div onClick={this.mealOneClickHandler} className='meal_container'>
                    <img src={PancakeImage} />
                    <p>Meal one: Pancakes</p>
                </div>

                <div onClick={this.mealTwoClickHandler} className='meal_container'>
                    <img src={OmeletteImage} />
                    <p>Meal two: Omelet</p>
                </div>

                <div onClick={this.mealThreeClickHandler} className='meal_container'>
                    <img src={WrapImage} />
                    <p>Meal three: chicken wrap</p>
                </div>

                <div onClick={this.mealFourClickHandler} className='meal_container'>
                    <img src={SpagettiImage} />
                    <p>Meal Four: Spagetti Bolognase</p>
                </div>

            </div>
        );
    }
}

and here's my attempt to convert it to a functional component thing I'm struggling with is how to check if hook states are true atm I only detect if they're created?

import React, { useState, useEffect, useContext } from 'react';
import PancakeImage from '../assets/Pancakes.jpg';
import OmeletteImage from '../assets/Omelette.jpg';
import WrapImage from '../assets/Wrap.jpg';
import SpagettiImage from '../assets/Spagetti.jpg';
import { GlobalContext } from '../context/GlobalState';


import CancelIcon from '@material-ui/icons/Cancel';
import Gainimg from '../assets/Gain.svg'
import Recompimg from '../assets/Recomp.svg'
import Loseimg from '../assets/Lose.svg'

function Main_page (props) {

    const [healthData, healthDataSet] =useState((JSON.parse(localStorage.getItem('user_data'))))

    const [mealOne_box, mealOne_boxSet] = useState(false);
    const [mealTwo_box, mealTwo_boxSet] = useState(false);
    const [mealThree_box, mealThree_boxSet] = useState(false);
    const [mealFour_box, mealFour_boxSet] = useState(false);
    const [gainImage, gainImageSet] = useState(false);
    const [recompImage, recompImageSet] = useState(false);
    const [loseImage, loseImageSet] = useState(false);



    useEffect(() => {
        //GoalChecker()
        console.log(healthData)
    });

 const   GoalChecker = () => {
        if (healthData !== null) {

            if (healthData.goal === 'Gain') {
                gainImageSet({ gainImage: true });
                recompImageSet({ recompImage: false });
                loseImageSet({ loseImage: false });
            }

            if (healthData.goal === 'Recomp') {
                gainImageSet({ gainImage: false });
                recompImageSet({ recompImage: true });
                loseImageSet({ loseImage: false });
            }

            if (healthData.goal === 'Lose') {
                gainImageSet({ gainImage: false });
                recompImageSet({ recompImage: false });
                loseImageSet({ loseImage: true });
            }
        }
    };

    //handles clicks for meal one
 const   mealOneClickHandler = (event) => {
        mealOne_boxSet({ mealOne_box: true });
    };

 const   mealOne_boxClickHandler = (event) => {
        mealOne_boxSet({ mealOne_box: false });
        console.log(mealOne_box)
    };

    //handles clicks for meal two
const    mealTwoClickHandler = (event) => {
        mealTwo_boxSet({ mealTwo_box: true });
    };

 const   mealTwo_boxClickHandler = (event) => {
        mealTwo_boxSet({ mealTwo_box: false });
    };

    //handles clicks for meal three
 const   mealThreeClickHandler = (event) => {
        mealThree_boxSet({ mealThree_box: true });
    };

const    mealThree_boxClickHandler = (event) => {
        mealThree_boxSet({ mealThree_box: false });
    };

    //handles clicks for meal Four
 const   mealFourClickHandler = (event) => {
        mealFour_boxSet({ mealFour_box: true });
    };

 const   mealFour_boxClickHandler = (event) => {
        mealFour_boxSet({ mealFour_box: false });
    };


    //setting meal more information on click
    let mealOne;
    let mealTwo;
    let mealThree;
    let mealFour;

    if (mealOne_box) {
        mealOne = (
            <div className='meal_popup'>
                <div className='meal_popupElement'>
                    <CancelIcon onClick={mealOne_boxClickHandler} />
                    <img src={PancakeImage} />
                    <p>testing1</p>
                </div>
                <div onClick={mealOne_boxClickHandler} className='meal_popupBackground' />
            </div>
        )
    };

    if (mealTwo_box === true) {
        mealTwo = (
            <div className='meal_popup'>
                <div className='meal_popupElement'>
                    <CancelIcon onClick={mealTwo_boxClickHandler} />
                    <img src={OmeletteImage} />
                    <p>testing2</p>
                </div>
                <div onClick={mealTwo_boxClickHandler} className='meal_popupBackground' />
            </div>
        )
    };

    if (mealThree_box === true) {
        mealThree = (
            <div className='meal_popup'>
                <div className='meal_popupElement'>
                    <CancelIcon onClick={mealThree_boxClickHandler} />
                    <img src={WrapImage} />
                    <p>testing3</p>
                </div>
                <div onClick={mealThree_boxClickHandler} className='meal_popupBackground' />
            </div>
        )
    };

    if (mealFour_box === true) {
        mealFour = (
            <div className='meal_popup'>
                <div className='meal_popupElement'>
                    <CancelIcon onClick={mealFour_boxClickHandler} />
                    <img src={SpagettiImage} />
                    <p>testing4</p>
                </div>
                <div onClick={mealFour_boxClickHandler} className='meal_popupBackground' />
            </div>
        )
    };


    /*<p className='food_text'>age: {healthData.age}</p>
    <p className='food_text'>gender: {healthData.gender}</p>
    <p className='food_text'>goal: {healthData.goal}</p>
    <p className='food_text'>height: {healthData.height}</p>
    <p className='food_text'>weight: {healthData.weight}</p>*/

    //gets users data and renders it to <p> items
    let weight

    if (healthData !== null) {
        if (healthData.units === 'lbs') {
            weight = Math.floor(healthData.weight / 2.2)
        } else {
            weight = healthData.weight
        }
    }

    return healthData == null ? "" : (
        <div className='main_Main'>
            <div className='App_margin' />


            <div className='statusbar'>
                <div className='Goaldiv'>
                    <p>Goal: {healthData.goal}</p>
                    {gainImage ? <img src={Gainimg} /> : null}

                    {recompImage ? <img src={Recompimg} /> : null}

                    {loseImage ? <img src={Loseimg} /> : null}

                </div>

                <div className='testDiv'><p>Age: {healthData.age}</p></div>

                <div className='testDiv1'><p>Gender: {healthData.gender}</p></div>

                <div className='testDiv2'><p>weight: {weight}Kg</p></div>
            </div>

            {mealOne}
            {mealTwo}
            {mealThree}
            {mealFour}

            <div onClick={mealOneClickHandler} className='meal_container'>
                <img src={PancakeImage} />
                <p>Meal one: Pancakes</p>
            </div>

            <div onClick={mealTwoClickHandler} className='meal_container'>
                <img src={OmeletteImage} />
                <p>Meal two: Omelet</p>
            </div>

            <div onClick={mealThreeClickHandler} className='meal_container'>
                <img src={WrapImage} />
                <p>Meal three: chicken wrap</p>
            </div>

            <div onClick={mealFourClickHandler} className='meal_container'>
                <img src={SpagettiImage} />
                <p>Meal Four: Spagetti Bolognase</p>
            </div>

        </div>
    );
}

export default Main_page

Its going quite well it compiles etc just some functionality isn't working like before.

Unrelated, but it might be convenient to refactor the code a bit first, then tackle the conversion. There's a lot of noise-some code that'll make re-jiggering more painful than necessary. — Dave Newton
– Dave Newton, Commented Mar 30, 2020 at 16:09
what sort of things need rejigging? the conditional image rendering? cause that can definitely be cleaner you're right. as for what isn't working any of the statements checking for true or false if (mealTwo_box === true) for instance doesn't. I tried if (mealTwo_box) but that just checks if that state exists so actives the open function but not the close the state is false but does still exist. — lukeet
– lukeet, Commented Mar 30, 2020 at 16:14
if (mealTwo_box) does not just checks if that state exists, it checks if its true or not — Muhammad Haseeb
– Muhammad Haseeb, Commented Mar 30, 2020 at 16:40

Muhammad Haseeb · Accepted Answer · 2020-03-30 19:18:42Z

1

You Can simply change {mealOne} to :

     {
       mealOne &&
         <div className='meal_popup'>
           <div className='meal_popupElement'>
              <CancelIcon onClick={mealOne_boxClickHandler} />
                <img src={PancakeImage} />
                   <p>testing1</p>
            </div>
            <div onClick={mealOne_boxClickHandler} className='meal_popupBackground' />
         </div>

      }

Here is an example on codesandbox: https://codesandbox.io/s/competent-tree-0lnvi

edited Mar 30, 2020 at 19:18

answered Mar 30, 2020 at 18:07

Muhammad Haseeb

1,3611 gold badge12 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

lukeet Over a year ago

the html code does render thats not the problem it as its put into the render as {mealOne} I just don't know how to make it so the if function detects true or false

Muhammad Haseeb Over a year ago

do you want to render that meal_popup when your mealOne state is true, right?

lukeet Over a year ago

yeah thats my aim

Muhammad Haseeb Over a year ago

Okay, My updated answer should work and do consider accepting answer if it solves your issue

lukeet Over a year ago

Works a treat mate thank you so much but for future reference as opposed to (!mealOne) how do you manually set the property of hooks? say i wanted to set it to a null?

|

Collectives™ on Stack Overflow

How do I convert my react js class component to a functional component?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related