Call function from another React component

Question

My first component is as follow:

const hellos = ['Hola', 'Salut', 'Hallo', 'Ciao', 'Ahoj', 'Annyeong-haseyo', 'Aloha', 'Howdy', 'Ni Hao', 'Konnichiwa']

export class Welcome extends Component {

    constructor(props) {
        super(props);
        this.state = {
            errors: []
        };
    }

    sayHello = function() {
        return hellos[Math.floor((Math.random()*hellos.length))];
    }

    render() {
        return (
            <div className="Welcome">

            </div>
        );
    }
}

I want to be able to call sayHello() from another component. All answers I've seen so far talk about parent and child relationships but in this case the two components don't have any relationship. I thought of something like this but it doesn't do the job:

import { Welcome } from './Welcome'

export const Life = () => (
    <div className="Life">
      <p>{ Welcome.sayHello() }</p>
    </div>
)

I would like to get a random element of the hellos array printed in Life.

So what do you expect to happen in the Life component? Should it show the Welcome component at all? Because your current code will not. — nem035
– nem035, Commented May 21, 2017 at 21:01
@ocram Well, the reason why it's not working is because sayHello is a method of an instance, not a static function. You would have to create an instance of Welcome via creating a Welcome element and using refs or making it static. Anyways, this seems like the wrong decision. — Andrew Li
– Andrew Li, Commented May 21, 2017 at 21:03
It has to be parent child relationship. React works on props and states architecture. If you want to use sayHello in other component, then you will have to pass sayHello as prop to the other component from this component. — EdG
– EdG, Commented May 21, 2017 at 21:03

user2340824 · Accepted Answer · 2017-05-21 21:33:49Z

11

There are a number of ways you could achieve this:

You can do this by creating the sayHello function and using it simply as a named-function.

hello.js

const hellos = ['Hola', 'Salut', 'Hallo', 'Ciao', 'Ahoj', 'Annyeong-haseyo', 'Aloha', 'Howdy', 'Ni Hao', 'Konnichiwa'];

const sayHello = function() {
    return hellos[Math.floor((Math.random()*hellos.length))];
};

export { sayHello };

Then you can import into which ever component you wish to share the functionality:

import { sayHello } from './hello';

class CompA extends React.Component {
    render() {
        return <span>{sayHello()}</span>;
    }
}

class CompB extends React.Component {
    render() {
        return <span>{sayHello()}</span>;
    }
}

render(<span>
        <CompA />
        <CompB />
    </span>, document.querySelector('#app'));

Created a https://www.webpackbin.com/bins/-KkgrwrMGePG4ixI0EKd

Another way, is to simply define your sayHello Function as static.

static sayHello() {
    return hellos[Math.floor((Math.random()*hellos.length))];
}

edited May 21, 2017 at 21:33

answered May 21, 2017 at 21:26

user2340824

2,1522 gold badges15 silver badges19 bronze badges

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

1 Comment

John Ruddell Over a year ago

or you can use a ref for a component and call a method on it.

Collectives™ on Stack Overflow

Call function from another React component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related