Component Communications in ReactJS

In this video, we’ll learn how ReactJS components communicate with each other. In React, the flow of data is always unidirectional from the parent component down to a child component. Normally, the single source of truth (actual state data) is stored in a class (stateful) component. Without using React Hooks or other third-party tools, When this data needs to be consumed by another component, you have a couple of options: (1) pass it down via the props object, (2) use React Hooks or mixins (deprecated), (3) react router, or (4) via a third party tool such as Redux. In this video, we’ll learn to use only option 1 to pass state via the props and an event handler.