How can I communicate between two React JS Components?
Hello again! I hope you enjoyed my previous article about React JS: Loops in JSX. Today I'm going to explain another simple but core flow inside a React Application: Communicate two React JS components, for this, as any key concept, we need to understand what use cases are probable to appear inside those apps. Let's get started.
How the elements relate each other?
In React is sometimes useful to see all of our components as nodes, which each one is part of a component three, so, said this, we might encounter that components relate to each other through relationships, what kind of relationships? well, there are many:
Parent to child
Props
Props are the easiest way to share information between components, and it's the key feature we should understand about React.
To share properties from a Parent Component to its child component, the easiest way is through attributes
class Parent extends React.Component {
constructor() {
super();
this.myData = {
firstName: 'Mario',
lastName: 'Gomez'
};
}
render() {
return (
);
}
}
Also we can use ECMAScript 6 spread operator as a shorthand for this, but we must be aware of the properties names in the child, and maybe we are sending unnecessary information.
render() {
return (
);
}
Using Refs
Nothing explains better than the example itself:
class Child extends React.Component {
constructor() {
super();
}
sayHello() {
return 'hello';
}
render() {
return
{this.sayHello()}
;
}
}
class Parent extends React.Component {
constructor() {
super();
}
render() {
return (
);
}
componentDidMount() {
var sayHello = this.refs.foo.sayHello();
// Now sayHello calls the child method
}
}
Child to Parent
Callback Functions
This is simple: Pass a function to the child and from the child, you can use that function to access its parent. Example ahead:
class Parent extends React.Component {
constructor() {
super();
this.greeting = 'Hello';
}
sayHello() {
return this.greeting;
}
render() {
return (
);
}
}
class Child extends React.Component {
constructor() {
super();
}
render() {
return
{this.props.sayHello()}
;
}
}
// We need to declare the prop Type
Child.propTypes = {
sayHello: React.PropTypes.func
}
Event bubbling
Getting help from an old concept, this way we can allow Parent Components to capture DOM elements originated by children.
class Parent extends React.Component {
constructor() {
super();
}
render() {
return (
<div>// Any number of child components can be added here.</div>
);
}
handleKeyUp(event) {
// This function will be called for the 'onkeyup' event in any <input type="text" />
// fields rendered by any of my child components.
}
}
## Sibling Components
Through parent
class ParentComponent extends React.Component {
constructor() {
super();
}
render() {
return (
<div></div>
);
}
child1Function() {
return '1';
}
child2Function() {
return '2';
}
}
Observer Pattern
This software pattern designates an object capable of sending messages to other objects. Inside the React context, this means the components should subscribe to certain messages and other components should publish messages to the subscribers.
We can accomplish this using the componentDidMount method to subscribe components and unsubscribe using the componentWillMount method.
For more information about the implementation of those please refer to PubSubJS, EventEmitter or MicroEvent.js
And that's everything for today, thanks for reading!
