How to pass data between React components?

Say you want to pass data between React components. As I've seen, there are a couple of ways to do it. What I'm gonna show here is just one of them. It's not using anything external, so it's a good way (IMO) to practice one's React skills. In my case, I needed to get the user input from one component to another. To do this, I learned how to pass data between those two using a third (parent) component. I will try to show you actually how easy to do so.

Passing data from parent to child component

Let's start by the easiest step: Sending data from parent to child. For heuristic purposes, I'll use a function component for the child. Let's say we have a parent component called App. And let's make it a class component because we're going to make use of state in this example.

class App extends Component {
  constructor(props) {
    super(props);

    this.state = { data: "some data here" };
  }

  render() {
    return (
      <div>
        <Child1 parentData={this.state.data} />
      </div>
    );
  }
}

As you can see, I already included a component called Child1 inside the render method, with the props "parentData" that's using the "data" object in the App component's state.

Step 2: Declare a function component called Child1 and pass the parentData props in it.

function Child1(props) {
  return <div>The data we're getting is : {props.parentData}</div>;
}

That's all, actually. Here we send the data from parent to child, and from child, we can use it in the render method. I don't know if anyone feels weird how these things work in React, because I do, but once you get the hang of it, it feels much comfortable to play with React.

From child to parent component (and from there to another child)

Now, let's see how we can pass data from child to parent. Because the parent component will be the medium we'll pass data between children. Let's rewrite our App class component

class App extends Component {
  constructor(props) {
    super(props);

    this.state = { data: "some data here" };
  }
  handleCallback = (childData) => {
    this.setState({ data: childData });
  };
  render() {
    return (
      <div>
        <Child1 parentData={this.state.data} />
        <Child2 fromChild={this.handleCallback} />

      </div>
    );
  }
}

We've did some new things with the App class component. -added a handleCallback function that sets the state with the data taken with "fromChild" props. -rendered a Child2 component with fromChild props calling the handleCallback function.

Now, we need to write the Child2 component. For heuristic purposes again, I'm going to write this one as a class component. This shows us that the children need not be the same type of components, indeed, one can be a class component and the other can be a function component. Just so we know.

Here's is our Child2 component:

class Child2 extends Component {
  constructor(props) {
    super(props);

    this.state = {};
  }
  sendData = () => {
    this.props.fromChild("data sent by the child");
  };

  render() {
    return (
      <div>
        <button onClick={this.sendData}>Send data</button>
      </div>
    );
  }
}

What do we have here? -A sendData function with the props fromChild -a button that calls that sendData function on click. What will happen now? Well, remember we put that fromChild props in Child2 component while rendering it inside the App parent component. That fromChild props, in turn, was calling the handleCallback function that updates the App component's state. And remember, what was our first child component doing? Exactly, it was getting data from the App component's state. Now, as a result of the above steps, the first child component will get the data given by the second child component, using the parent as a medium.

If you write these code lines, you'll see a button, and when you click the button, the text (i.e. data) will change.

I hope this explanation was clear. I realized, whilst writing, how weird React works. But again, once you get the hang of it, things start to become quite automatic.

Anyway, have fun & keep coding!