How can I call a component's method from another component in React?

Question

I have a modal component with two methods that show/hide the modal. How can I call those methods from another component?

This is the code for the Modal:

// Dependencies
//==============================================================================
import React from 'react'
import Modal from 'boron/DropModal'

// Class definition
//==============================================================================
export default class RegistrationModal extends React.Component {
  showRegistrationModal() {
    this.refs.registrationModal.show()
  }

  hideRegistrationModal() {
    this.refs.registrationModal.hide()
  }

  render() {
    return (
      <Modal ref="registrationModal" className="modal">
        <h2>Meld je aan</h2>
        <button onClick={this.hideRegistrationModal.bind(this)}>Close</button>
      </Modal>
    )
  }
}

Possible duplicate of ReactJS - Call One Component Method From Another Component — Damjan Pavlica
– Damjan Pavlica, Commented Nov 19, 2017 at 22:43

pawel · Accepted Answer · 2016-07-07 11:43:47Z

1

You can call a components method from the outside as long as you keep a reference to the component. For example:

let myRegistrationModal = ReactDOM.render(<RegistrationModal />, approot );
    // now you can call the method:
    myRegistrationModal.showRegistrationModal()

It's a bit cleaner if you pass a reference to the modal to another component, like a button:

let OpenModalButton = props => (
  <button onClick={ props.modal.showRegistrationModal }>{ props.children }</button>
);
let myRegistrationModal = ReactDOM.render(<RegistrationModal />, modalContainer );

ReactDOM.render(<OpenModalButton modal={ myRegistrationModal }>Click to open</OpenModalButton>, buttonContainer );

Working example: http://jsfiddle.net/69z2wepo/48169/

answered Jul 7, 2016 at 11:43

pawel

37.1k7 gold badges59 silver badges54 bronze badges

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

Comments

elreeda · Accepted Answer · 2016-07-07 11:23:52Z

0

You cant call it from another component, because its a method belong to RegistrationModal component, but you can refactor your code so you can call it

export function hideRegistrationModal() {
  console.log("ok");
}

export default class RegistrationModal extends React.Component {
  render() {
    return (
      <Modal ref="registrationModal" className="modal">
        <h2>Meld je aan</h2>
        <button onClick={hideRegistrationModal}>Close</button>
      </Modal>
    )
  }
}

now you can call from anywhere but you need to import it first like this

import { RegistrationModal, hideRegistrationModal } from 'path to modal.js'
//       ^-- Component name  ^-- Method

answered Jul 7, 2016 at 11:23

elreeda

4,6072 gold badges22 silver badges45 bronze badges

1 Comment

noodles_ftw Over a year ago

Doing a console.log seems to work, but how would I access the registrationModal ref in the RegistrationModal class?

Community · Accepted Answer · 2017-05-23 10:28:57Z

0

What you want to do is create a parent component which will handle the communication between your modals.

A really great example and explanation can be found here: ReactJS Two components communicating

This is a good approach because it keeps your components decoupled.

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Jul 7, 2016 at 11:24

Dennis

4,0277 gold badges28 silver badges44 bronze badges

Collectives™ on Stack Overflow

How can I call a component's method from another component in React?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related