Agile

React JS: Communication between components


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

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

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

Javascript
De Código, Café y Cervezas 05 – ReactJS + AngularJS (Parte 3)
AEM
Responsive layouting in AEM
Agile
Top 5 Reasons to Use Agile Development When Building an Ecommerce Website