CODEWITHSUNDEEP
javascriptreactjs
sp92
sp92

Reputation: 987

How would I my component work inside another component without repeating code?

How would I make my component work inside another component without repeating code?

In other words, inside NextPage.js file, the <LogoutButton/> component won't carry out its function? I want the <LogoutButton/> to carry out the exact same function as it does inside the <Home/> component.

Is there a way to do this without making NextPage.js a class based component and repeating the same logic inside NextPage.js component?

Here's the Home.js file:

import React, {Component} from 'react';
import fire from '../../config/Fire';
import classes from './Home.css';
import Aux from '../../hoc/Aux';
import NextPage from '../../components/nextpage/NextPage';
import LogoutButton from '../../UI/buttons/LogoutButton';

class Home extends Component {

    state = {
        flag: false
    }

    logout() {
        fire.auth().signOut();
    }

    goToNextPage() {
        this.setState({flag: true});
    }

    render() {
        const flag = this.state.flag;

        if(flag) {
            return <NextPage/>;
        }

        return (
            <Aux>
                <button
                type="button"
                className="btn btn-outline-primary btn-lg btn-block"
                onClick={this.goToNextPage.bind(this)}>some button
            </button>

                <LogoutButton clicked={this.logout.bind(this)}/>
                <NextPage/>
            </Aux>
        );
    }
}

export default Home;

Here's the NextPage.js file:

import React from 'react';
import Aux from '../../hoc/Aux';
import LogoutButton from '../../UI/buttons/LogoutButton';

const nextPage = () => {
    return(
        <Aux>
            <LogoutButton/>
        </Aux>
    );
}

export default nextPage;

Here's the LogoutButton.js file:

import React from 'react';
import classes from '../../UI/buttons/LogoutButton.css';
import Aux from '../../hoc/Aux';

const logoutButton = (props) => (
    <Aux>
        <button
            className={classes.LogoutButton}
            onClick={props.clicked}>Logout
        </button>
    </Aux>
);

export default logoutButton;

Upvotes: 1

Views: 64

Answers (4)

Hom Bahrani
Hom Bahrani

Reputation: 3552

You can pass functions that are in Home into NextPage as props e.g.

<NextPage goToNextPage={this.goToNextPage} />

then inside NextPage you can use that by calling props.NextPage()

Also if you write your goToNextPage function as an arrow function then you dont need to bind it

goToNextPage = () => this.setState({flag: true});

Upvotes: 0

Anthony Liu
Anthony Liu

Reputation: 322

You can move your logout logic into the logout button component. Function handler is better when your logout logic becomes complex.

import React from 'react';
import classes from '../../UI/buttons/LogoutButton.css';
import Aux from '../../hoc/Aux';
import fire from '../../config/Fire';

const handleLogout = () => {
    fire.auth().signOut();
}

const logoutButton = (props) => (
    <Aux>
        <button
            className={classes.LogoutButton}
            onClick={handleLogout}
        >
        Logout
        </button>
    </Aux>
);

export default logoutButton;

Upvotes: 1

Gonzalo.-
Gonzalo.-

Reputation: 12682

why don't you move the fire.auth().signOut(); line inside the logout button ?

import React from 'react';
import classes from '../../UI/buttons/LogoutButton.css';
import Aux from '../../hoc/Aux';
import fire from '../../config/Fire';

const logoutButton = (props) => (
    <Aux>
        <button
            className={classes.LogoutButton}
            onClick={() => fire.auth().signOut()}>Logout
        </button>
    </Aux>
);

export default logoutButton;

Unless I am missing something, the only usage of fire in Home component is that one. Why don't you put it in the logout component ?

Furthermore, you don't need to pass that as prop now, and it will behave the same everywhere you place it

Upvotes: 0

amankkg
amankkg

Reputation: 5071

You don't need to duplicate all logic since your logout logic does not depend on Home component.

// NextPage.js
import React from 'react';
import fire from '../../config/Fire';
import Aux from '../../hoc/Aux';
import LogoutButton from '../../UI/buttons/LogoutButton';

const nextPage = () => {
    return(
        <Aux>
            <LogoutButton onClick={fire.auth().signOut} />
        </Aux>
    );
}

export default nextPage;

Or, if fire.auth() is potentially an expensive function you can write it like this:

onClick={() => fire.auth().signOut()}

Upvotes: 0

Related Questions