How to send data from a child component to a parent component in react with rxjs?

If you have read my last post, (if you have not I strongly recommend to read it for knowing what I'm talking about) you probably know how to send data from a child component to a parent component, but this time I will show you how to do it in another way using a fantastic library called rxjs, you can read more from the documentation of what this library is about and learn how to use it.

For today's post I will show you how to use a little bit of this library to achieve our goal.

First, let's be clear, this library is using reactive programming, if you don't know what this is, to be short, the reactive programming is a combination of the best ideas of the Observer Pattern, Iterator Pattern and functional programming.

Now, let's define our problem.
We need a button where we show the amount of clicks that the user is making, but in the parent component we also have to display the amount of clicks. It goes something like this:

How can we do that?
Let's code to find out.

Children component

import { useEffect, useState } from "react";
import { Subject } from "rxjs";

// we create and export the observable;
// note the $ character at the end;
// this is the convention for observable variables
export const countObserver$ = new Subject();
export default function CustomButton({
  className,
  action = () => {},
  children,
}) {
  const [count, setCount] = useState(0); 

  useEffect(() => {
    // send [count] in our observable
    countObserver$.next(count); 
  }, [count]);// check all the changes of [count]

  return (
    <button
      className={`button ${className}`}
      onClick={() => {
        setCount(count += 1); // we count the clicks
        action();
      }}
    >
      {children} clicks: {count}
    </button>
  );
}

Parent component

import { useEffect, useState } from "react";
import CustomButton, { countObserver$ } from "../components/customButton";

export default function Example() {
  // we create the same variable as the children component
  const [count, setCount] = useState(0);

  useEffect(() => {
    // subscribe the observable, this function returns 
    // the count that is changing in the child component
    countObserver$.subscribe(setCount);
  }, []);

  const onClick = () => {
    console.log("do some action");
  };

  return (
    <div className="is-flex is-flex-direction-column is-align-self-flex-end">
      <CustomButton action={onClick} className="is-success mb-3">
        Button
      </CustomButton>
      <label className="label">Clicks: {count}</label>
    </div>
  );
}

And finally we'll have something like this:

Conclusion

With this approach we can see a little bit of what rxjs can do, if you want to know more about this library let me know and I'll post more about it, with a different examples.
There are endless possibilities of what we can do, for example if you need the count variable to be multiplied by 10, is just as simple as programming a pipe with a map function inside of it and multiply the data.

countObserver$.pipe(map((data) => data * 10)).subscribe(setCount);

Thank you so much for reading and feel free to contact me if you need anything.

Blog

How to send data from a child component to a parent component in react with rxjs?

JafetMeza

Children component

Parent component

Conclusion

Join Our Newsletter. No Spam, Only the good stuff.

Related