How can I use a function from another class in my React app? [duplicate]

Question

This is my Tools.js

export default class Tools extends React.Component {
    show() {
        console.log(1)
    }
}

And this is my App.js

export default class App extends React.Component {
    componentDidMount() {
        Tools->show(); // ???
    }
    
    render() {
        return (
            <div className="App">
                <Loading />
                <Header />
            </div>
        );
    }
}

I want call show() function in componentDidMount() of App

How I can call function from another class into App?

You'd import your Tool class at the top of the App class file, and then you'd be able to call show() — Joshua Terrill
– Joshua Terrill, Commented Jun 16, 2021 at 18:21
@JoshuaTerrill i import this: import Tools from './components/class/Tools'; — Parsa Nikoo
– Parsa Nikoo, Commented Jun 16, 2021 at 18:23
Tools.prototype.show() - but you should never do this !. Just define common function in separate file — Robert
– Robert, Commented Jun 16, 2021 at 18:26
Because your code will embroiled. Common practice is to separate each common functionality in separate function/class in it's own file. In near function you will forget that this function is used in other components and you will adjust it to this Tools component. This is just really bad practice. — Robert
– Robert, Commented Jun 16, 2021 at 18:31

Colin Rosati · Accepted Answer · 2021-06-16 21:30:01Z

1

Since your importing a class you need to instantiate it with new then use your show method.

In your App.js:

import {Tools} from 'Tools.js';

const myTool = new Tools();

export default class App extends React.Component {
componentDidMount() {
    myTool.show();
}

render() {
    return (
        <div className="App">
            <Loading />
            <Header />
        </div>
    );
}

}

answered Jun 16, 2021 at 21:30

Colin Rosati

3422 silver badges16 bronze badges

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

1 Comment

Parsa Nikoo Over a year ago

Thank you. Can I access direct to function like php? Tools::show(); ?

Collectives™ on Stack Overflow

How can I use a function from another class in my React app? [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related