No-Redux Strategy for Siblings communication
Tags: reactsiblings, reactcomponents, noredux, react
Published: 2018-04-20 16:56:32

---
title: No-Redux Strategy for Siblings communication
published: true
tags: react-siblings,react-components,no-redux,reactjs
canonical_url: https://codeburst.io/no-redux-strategy-for-siblings-communication-3db543538959
---

![](https://cdn-images-1.medium.com/max/1024/1*W_QA-TIucxHOklD0ZUIrZQ.png)

Redux is great, but we must also know the basics before using any framework or library, right? Thats what I did before learning bootstrap and doing the same with Redux and ReactJs. So, this article is all about establishing the basic communication channel b/w siblings using just ReactJs.

Let’s discuss the Requirement, _My app has a child component which has to communicate with its sibling component_. So it must happen through Parent with a Callback method from **parent to**  **child1** which will get the value from child1 and will **pass it to the other child** as props.

Simple, isn’t it?

### Data Flow

![](https://cdn-images-1.medium.com/max/1024/0*7HiCeD2uqenE8WZ8.png)<figcaption>Data communication flow</figcaption>

### Flow

Req: **Child1** has an input field, on typing that value must be sent to **child2** component via Parent

### Parent Component

First, **define a Callback function in Parent** and send it as props to Child1

```
constructor(){ super(); this.state= { data : "" } }

formChild1(params) { this.setState({ data : params }) }
```

I have set a **state** variable _data_ and updating its value using the callback function **fromChild1** and sending the state value to Child2. _Why using state? Because props are Immutable and it is always better to pass state as props. And if you want to pass static data always use props. Use state to pass dynamic data._

```
render() { return( \<div\> \<p\>Parent\</p\> \<Child callback={this.formChild1.bind(this)} /\> \<Child2 data={this.state.data} /\> \</div\> ); }
```

### Child-1

Install prop-types because **React.PropTypes** is deprecated and React suggests you to use prop-types . [Learn more](https://facebook.github.io/react/docs/typechecking-with-proptypes.html)

```
npm install prop-types
```

**Import prop-types into child1**

```
import PropTypes from 'prop-types';
```

define the child component

```
class Child1 extends Component {

getContent(event) { this.props.callback(event.target.value); }

render() { return ( \<div\> \<p\>Child One\</p\> \<input type="text" onChange={this.getContent.bind(this)} placeholder="Type Something in Child One"/\> \</div\> ); } }
```

**getContent** gets the input value **_onChange_** and _will send it to parent through a call back function_.

Define **prop-types** for Child1 :

```
Child1.protoTypes = { callback : PropTypes.func, }
```

We are type checking for the call back function.

### Child-2

Define a simple component which renders \<p\> tag with the **props** value sent to it _from parent_.

```
class Child2 extends Component {

render() { return( \<p\>Child2 : {this.props.data}\</p\> ); }

}
```

That’s it. We have Now _established a communication channel between sibling to sibling_. **And**  **don’t forget to export the child components if you have separate files for parent, child1 and child2**.

> For reference see the [code](http://github.com/SarathSantoshDamaraju/reactComponentsTalk/blob/siblingToSibling)

And Finally,

![](https://cdn-images-1.medium.com/max/568/1*FKucqDjCP8gb3lVoBeh8xw.png)<figcaption>Keep it in mind!!!</figcaption>

> Thanks for reading my post. I’d like to hear your thoughts in comments. If you like the article, please click the💚 below so that more people may read it.

* * *