CODEWITHSUNDEEP
javascriptreactjs
AziCode
AziCode

Reputation: 2692

How to call a component method from another component?

I have a header component that contain a button and I want this button to display another component(modal page) when it's clicked.

Can I do something like this:

Here's my header component:

 import ComponentToDisplay from './components/ComponentToDisplay/index'

 class Header extends React.Component {
  constructor(props) {
    super(props)
  }

  props : {
    user: User
  }

  _handleInvitePlayerClick = () => {
     this.refs.simpleDialog.show();
  }

  render(){

   return(
     <Button onClick={this._handleInvitePlayerClick} ><myButton/></Button>
     <ComponentToDisplay />

   )
  }
 }

Here is my component for the modal page that should be displayed when the button on the other component gets clicked:

class ComponentToDisplay extends React.Component {

componentDidMount() {

}

render() {

return (

<div>
  <SkyLight
    ref="simpleDialog"
    title={"Title for the modal"}>
     {"Text inside the modal."}
    <Button onClick={() => this.refs.simpleDialog.hide()}>{"Close modal"}</Button>
  </SkyLight>
</div>
  )
 }
}

Library being used for the modal : https://github.com/marcio/react-skylight

Upvotes: 2

Views: 3345

Answers (1)

Douglas Ludlow
Douglas Ludlow

Reputation: 10922

More like this:

class Header extends React.Component {
    constructor(props) {
        super(props)
    }

    props: {
        user: User
    }

    render() {
        return (
            <Button onClick={() => this.refs.componentToDisplay.showMe()}><myButton /></Button>
            <ComponentToDisplay ref="componentToDisplay" />
        )
    }
}

Being sure to expose a showMe() method on your child component:

class ComponentToDisplay extends React.Component {

    showMe() {
        this.refs.simpleDialog.show();
    }

    render() {
        return (
            <div>
                <SkyLight
                    ref="simpleDialog"
                    title={"Title for the modal"}>
                    {"Text inside the modal."}
                    <Button onClick={() => this.refs.simpleDialog.hide()}>{"Close modal"}</Button>
                </SkyLight>
            </div>
        )
    }
}

Basically, what's going on here is you wrap the SkyLight's show() method in your child component's own method (in this case, showMe()). Then, in your parent component you add a ref to your included child component so you can reference it and call that method.

Upvotes: 4

Related Questions