In this post we are going to explain how to achieve the communication between two components. Particularly in this post we are going to show an example on how to achieve a children to father component communication, i.e. we have some data in a component that is contained inside another component, and we need to take the information up.

We are going to do a movie searcher. There will be 4 components:

  • SearchComponent : Father of all components. Save the results of the search in its state. Render child components.

    Inside this component, we have SearchFormController, the one that will call the API, that will pass the results to this, demonstrating the technique I want to explain in this article.

  • SearchController : In charge of the logic, calling the API and treating the results.

  • SearchForm: Presentational component, the search bar.

  • SearchResults : Presentational component, show the results

 

How do we achieve the communication?

Passing a function from father to child through props.

In the child, we execute the function (that is actually declared in the father), and that function for example can store the results in its state, results coming from the child.

Example code

SearchComponent

Contained in this component it is the SearchController. For this one to pass data to the SearchComponent controller, we pass in the props the function _handleResults, that will be executed in the child component. It will be executed with a parameter that will be the result of the API call. This results are going to be stored in the state of the SearchComponent by the _handleResults component.

SearchController

SearchForm

SearchResults

We have seen how to pass data from one component to another.

Also how to implement the separation of logic and presentation between components : SearchController and SearchForm

Happy Coding!