When we were developing SUSI AI web chat some components became huge. So the team wanted to break some components into parts. Since the Login dialog-box is used in several places we decided to make a separate component for Login Dialog-box. In this post I am discussing how we implemented the feature as a separate component and how we have changed the state of the parent component of the child component.
Login Dialog-box contains all the things of the login dialog-box component.
Child-component (Login Dialog-box component) is here:
This method executes the ‘switchDialog’ function of the parent component.
export default class LoginDialog extends React.Component { handleClose = () => { this.props.switchDialog(false); }; render() { this.state = { open: this.props.open } const actions = <RaisedButton label="Cancel" backgroundColor={ UserPreferencesStore.getTheme() === 'light' ? '#607D8B' : '#19314B'} labelColor="#fff" width='200px' keyboardFocused={true} onTouchTap={this.handleClose} />; return ( <Dialog actions={actions} modal={false} open={this.props.open} autoScrollBodyContent={true} bodyStyle={bodyStyle} contentStyle={{ width: '35%', minWidth: '300px' }} onRequestClose={this.handleClose}> <Login {...this.props} /> </Dialog> ); } };
In this part we validate property types that has passed from the parent component.
LoginDialog.propTypes = {
open: PropTypes.bool,
switchDialog: PropTypes.func
};
In render() method I have returned the element.
To open and close dialog we have to communicate with parent component. We can send an instruction as an attribute of the element and we can refer it inside the element as “props”. This is how I have sent an instruction to the child element.
Parent-component:
‘handleOpen’ function opens the dialog when user hit on the login button.
handleOpen = () => {
this.setState({ open: true });
};
‘switchDialog’ function is using for change the state of parent component from child Component (Login Dialog-box component).
switchDialog=(dialogState)=>{
this.setState({open:dialogState});
};
render() {
const styles = {
'margin': '60px auto',
'width': '100%',
'padding': '20px',
'textAlign': 'center'
}
return (
<div className="signUpForm">
<Paper zDepth={1} style={styles}>
<h1>Sign Up with SUSI</h1>
<form onSubmit={this.handleSubmit}>
<div>
<h4>If you have an Account Please Login</h4>
<RaisedButton
onTouchTap={this.handleOpen}
label='Login'
backgroundColor={
UserPreferencesStore.getTheme()==='light'
? '#607D8B' : '#19314B'}
labelColor="#fff" />
</div>
</form>
</Paper>
<LoginDialog {...this.props} open={this.state.open} switchDialog={this.switchDialog} />
</div>
);
};
To open and close the dialog-box we have to send the state of the parent component to child component. To close the dialog-box we have to update the parent component’s state from child component.
To change the parent component’s state we have used this in element.
switchDialog={this.switchDialog}
To send the state to the child component we used this.
open={this.state.open}
To send other properties to the element we used this.
{...this.props}
After closing the dialog-box it calls this method and it updates the state of the parent component.
handleClose = () => {
this.props.switchDialog(false);
};
This is how we can communicate between child and parent components using react.
Resources:
Component Communication: http://andrewhfarmer.com/component-communication/
Material UI Dialogs: http://www.material-ui.com/#/components/dialog