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
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.