CODEWITHSUNDEEP
reactjsreact-propsreact-functional-component
ahmedta
ahmedta

Reputation: 13

passing props to a child functional component

I am trying to pass the auth variable and a function to toggle true and false so that i can control what is displayed for the user according to his status is he auth or not

i get this error even i think everything is fine .. also the same code i use for a class component and it works and i can console.log(props) is side the render function .. i think i am missing some thing here in this functional component .. i need another eye to look at this and tell me where i go wrong 

loginButtons.js:10 Uncaught TypeError: Cannot read property 'props' of undefined
    at onClick (loginButtons.js:10)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306)
    at executeDispatch (react-dom.development.js:389)
    at executeDispatchesInOrder (react-dom.development.js:414)
    at executeDispatchesAndRelease (react-dom.development.js:3278)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287)
    at forEachAccumulated (react-dom.development.js:3259)
    at runEventsInBatch (react-dom.development.js:3304)
    at runExtractedPluginEventsInBatch (react-dom.development.js:3514)
    at handleTopLevel (react-dom.development.js:3558)
    at batchedEventUpdates$1 (react-dom.development.js:21871)
    at batchedEventUpdates (react-dom.development.js:795)
    at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568)
    at attemptToDispatchEvent (react-dom.development.js:4267)
    at dispatchEvent (react-dom.development.js:4189)
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at discreteUpdates$1 (react-dom.development.js:21887)
    at discreteUpdates (react-dom.development.js:806)
    at dispatchDiscreteEvent (react-dom.development.js:4168)

Here is my home.js

import React, { Component } from "react";

import { GoogleLoginButton } from "./loginButtons";
import MenuBarApp from "./menuBarApp";

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            auth: true,
        };
    }

    authStatus(status) {
        this.setState({ auth: status });
    }

    render() {
        const { auth } = this.state;
        return (
            <div>
                {auth ? (
                    <MenuBarApp auth={this.state.auth} authStatus={this.authStatus.bind(this)} />
                ) : (
                    <GoogleLoginButton auth={this.state.auth} authStatus={this.authStatus.bind(this)} />
                )}
            </div>
        );
    }
}

export default Home;

and this is loginButtons.js

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

export function GoogleLoginButton(props) {
    const classes = useStyles();

    return (
        <div className={classes.root}>
            <Button variant="contained" size="large" color="primary" onClick={() => this.props.authStatus(true)}>
                Login with your Google Account
            </Button>
        </div>
    );
}

const useStyles = makeStyles((theme) => ({
    root: {
        "& > *": {
            margin: theme.spacing(1),
        },
    },
}));

Upvotes: 1

Views: 574

Answers (2)

akhtarvahid
akhtarvahid

Reputation: 9779

Change this.props.authStatus(true)} to props.authStatus(true)} in loginButton.js because it's funtional component not class based component.

export function GoogleLoginButton({authStatus}) {
const classes = useStyles();
    return (
            <div className={classes.root}>
                <Button variant="contained" size="large" color="primary" 
                 onClick={() => authStatus(true)}>
                    Login with your Google Account
                </Button>
            </div>
        );
  }

You can use Destructuring.

Upvotes: 0

Jagrati
Jagrati

Reputation: 12222

You don't have to use, this.props in functional component, the props are available as function parameter.

Only in class components, props are accessed as this.props.

export function GoogleLoginButton(props) {
    const classes = useStyles();

    return (
        <div className={classes.root}>
            <Button variant="contained" size="large" color="primary" onClick={() => props.authStatus(true)}>
                Login with your Google Account
            </Button>
        </div>
    );
}

Upvotes: 3

Related Questions