React: How do I access a component from another component? - reactjs

Question

I'm working on a project using react and I have a sign up modal and a login modal that are both separate components and I want to have two links ate the top of each modal to be able to switch from the sign up model to the login model. Each component model has a function open that looks like this:
open() {
this.setState({ showModal: true });
}
Is there a way for a component to call a function and set States from another component or do I need to make both models one component somehow?

Answer 1

The best way to handle communication between components is through a state container for the application that all components "hook in to".
Here's a very simple illustration:
// this state is defined somewhere in your application
// all of your components "hook in to" this state by including
// the values you want as props. For example,
// <MyFancyComponent value={state.value1} />
// and now MyFancyComponent has access to value1
state = {
value1: 42,
showModal1: false,
showModal2: false,
};
// somewhere in your application, there's a render method
// that looks like this
render() {
return (
<div>
{this.props.showModal1 ? <Modal1 /> : null}
{this.props.showModal2 ? <Modal2 /> : null}
{/* now render the rest of your component */}
</div>
);
}
The basic idea is that when this component (the one with the render method above) needs to show Modal1 or Modal2, it changes the appropriate flag in the state, which are mapped to the showModal* props on the component. Then the component re-renders and includes the appropriate modal. If you want to trigger a modal from another component, you change the appropriate flag in your application state & React will go to work re-rendering and show the modal.
The example above is ridiculously incomplete - it's intended to illustrate the basic idea only. To make this work, you'll need to implement a state container for your application. For that, I'd recommend either the flux pattern or redux.
Now, you could implement this as a set of callbacks & properties that are specific to the components you're working with, but I recommend against that - it becomes very difficult to manage, very quickly. Plus, it does not scale - to add a component, you would have to "wire it up" to all your other components manually.

Answer 2

In the component where you are rendering each of these login modals, you would want to pass in values through the props of each component. In the modal components, you would then use the value of the property passed in to determine if the modal should be shown.
Here's a quick example of how it could work (theoretically -- haven't tested):
Login/Signup Modal
import React from 'react';
const LoginModal = React.createClass({
propTypes: {
isVisible: React.PropTypes.boolean.isRequired,
onLogin: React.PropTypes.function,
},
componentWillReceiveProps(nextProps) {
// Will allow parent components to pass in a boolean
// telling this component when to render
this.setState({
showModal: nextProps.isVisible,
});
},
onSubmit() {
// TODO: Handle login
// If we let the parent handle the visibility, we just call
// the onLogin callback passed in and don't set this.state.showModal
this.props.onLogin();
},
render() {
return (
// Use this.state.showModal boolean to show/hide
// your login modal
);
},
});
export default LoginModal;
Parent Component
import React from 'react';
import LoginModal from './LoginModal';
const ParentComponent = React.createClass({
showLoginModal() {
this.setState({
showLogin: true,
});
},
hideLoginModal() {
this.setState({
showLogin: false,
});
// TODO: Likely change the route or do something else here...
},
render() {
return (
<button onClick={this.showLoginModal}>Login</button>
<LoginModal isVisible={this.state.showLogin} onLogin={this.hideLoginModal} />
);
},
});