How to add a prop from a functional component into a class component?

Question

I have a prop "language" that comes from my LanguageFlag component that inserts a SVG icon depending on the language (shown below). In a normal functional component I would pass the language through a prop in and then add it in the component as language={language}.

In this case <LanguageTitleOptions language={this.props.language}/> I read I should add it this way. But how do I pass the language property to my LandingPage component?

LandingPage component

class LandingPage extends Component {
constructor(props) {
super(props);
this.state = {
formVisible: false,
earlyAccessSuccessVisible: false,
isMobile: this._getIsMobile(),
};
}


return (
<div className="buttons">
   <LanguageTitleOptions
      **language={this.props.language}/>**
      <LanguageSelector/>
   </LanguageTitleOptions>
</div>

LanguageFlag component

import React from "react";
import PropTypes from "prop-types";
import SpainFlag from "./SpainFlag";
import UKFlag from "./UKFlag";

const FLAGS = {
    es: SpainFlag,
    en: UKFlag,
};

const LanguageFlag = ({ language, ...otherProps }) => {
    if (!language) return null;

    const Flag = FLAGS[language];

    return <Flag {...otherProps} />;
};

LanguageFlag.propTypes = {
    language: PropTypes.oneOf(["es", "en"]),
};

export default LanguageFlag;

LandingPageContainer

imports....
....
....
import LandingPage from "./LandingPage";

const mapStateToProps = (state) => {
    return {
        rootItemId: state.rootItemId,
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        onRootItemAvailable: (rootItemId) => {
            history.replace(generateItemPath(rootItemId));
        },
        onEarlyAccessRegistration: () => {
            const anonymousId = getAnonymousId();

            Meteor.call(TRACK_USER_REGISTERED_EMAIL, anonymousId);
        },
    };
};

const LandingPageContainer = connect(mapStateToProps, mapDispatchToProps)(LandingPage);

export default LandingPageContainer;

LanguageTitleOptions component

import React, { useEffect, useRef, useState } from "react";
import LanguageFlag from "/imports/cuadds/client/components/pages/settings/graphics/LanguageFlag";
import { Trans } from "@lingui/macro";

const LanguageTitleOptions = ({ language, className, children }) => {
    const menu = useRef();
    const [open, setOpen] = useState(false);

    const handleClick = (e) => {
        setOpen(!open);
    };

    const onWindowClick = (e) => {
        // close menu if user clicked outside language selector menu element
        if (!menu.current.contains(e.target)) {
            setOpen(false);
        }
    };

    useEffect(() => {
        if (open) {
            window.addEventListener("click", onWindowClick);
        }
        return () => {
            window.removeEventListener("click", onWindowClick);
        };
    }, [open]);

    return (
        <div onClick={handleClick}>
            <div className={className}>
                <Trans>Language:</Trans>
                <LanguageFlag language={language} width={18} style={{ marginLeft: 9 }} />
                <i className="fa fa-angle-down"></i>
            </div>
            <div ref={menu}>{open && children}</div>
        </div>
    );
};

export default LanguageTitleOptions;

@Konstantin It is the LandingPageContainer (I just added it at the bottom) — Rakai, Dec 29 '20 at 17:08
@TaghiKhavari the LanguageTitleOptions is a dropdown menu with two languages which you can select. — Rakai, Dec 29 '20 at 17:09
how are `LandingPage` and `LanguageFlag` related? if `LandingPage` is not a descendants from `LanguageFlag` you cant pass it. — buzatto, Dec 29 '20 at 18:15
@buzatto Inside the landing page I have a language component which changes the language when you select it. in the title of that component (languageTitleOptions) a flag normally displays depending on the language. Inside the component LanguageTitleOptions I have the languageFlag component which takes in language={language}. — Rakai, Dec 29 '20 at 18:26

score 1 · Answer 1 · answered Dec 29 '20 at 16:39

1

You pass props the same way as to functional components:

<LandingPage language={...}/>

answered Dec 29 '20 at 16:39

Mihályi Zoltán

822
6
11

How to add a prop from a functional component into a class component?

1 Answers1