How do I pass data from component to component in react.js?

React.js is a wonderful javascript framework built by engineers at Facebook. It’s great for building fast, scalable and modular applications. While it might seem a bit scary at first, it’s actually pretty easy to use ...once you get the hang of it. While it’s pretty similar to standard Javascript, there are a few differences, especially when it comes to passing around and accessing data from component to component. I’ll do my best to briefly explain this process with a high level overview, and hopefully this can give you a head start when you start your next react app. This won’t teach you react, but will instead hopefully help you with something I struggled to wrap my head around when first learning.

For the sake of this post, let’s say we have a simple app. It has a home screen, a login screen and an about page. Each of these pages are represented by a react component. <home>, <login> and <about>. Passing data between these components is crucial to the function of our app, so let’s walk through it’s done. There are four main points I’ll cover here. Parent/Child components, state, props and refs.

Parent/Child components – In most apps, you will have a hierarchy of pages/components. In this example app, we have <home> as the parent component and <login> and <about> as the children. Home is basically functioning as our controller for this app, passing information to both login and about, receiving data from the two children, and controlling the overall flow of the app based on this data.

State – In react, every component has a state. This is essentially an object that represents different parameters, lists or variables that are contained within that object – all of which can change. These parameters can be data that you want to store, or properties that have influence over what is rendered on screen. For example, in your login component could be the boolean property ‘loggedIn’. This could be set to true on a button click. In your about component, you could have a boolean property ‘isShowing’ which controls whether or not the about modal is popped up or not. The state is important because every time it changes, the page is re-rendered, thus letting you control your app by changing parameters in each components state. For example, you could click a login button, have logic to set the state property loggedIn to true, and then have logic in the Home component watching for this, re-rendering and taking you to the main home screen when this is true. Passing around this data is where props and refs come into play.

Props – Props let you define data that is passed to children from their parents. These properties are static; you can't add or remove any throughout the lifetime of the component. These are set when you declare an instance of the component, and the data can be basically anything. You could pass a function from parent to child, pass down an object that you want to manipulate within that child, give the child access to data within the parent’s state, or even just give the child a piece of data that is needed for certain logic. To access that data in the child, you call it by using this.props.yourDataHere. You could call a function by using this.props.yourFunctionHere(). What if you wanted to access data created within the child from the parent? Refs are your answer.

Refs – When creating the instance of your child component in the parent, along with the props you are passing along, you also create a ref. This is basically just saying – hey, here is what you call if you want to access this child’s data. If you have the <login> object within Home, you can add a property ref=’Login’ in the component declaration. Then, after creating functions or objects (or even the state) in the child, you can access that data from the parent by using this.refs.Login.yourDataHere. Want to call a child’s function within the parent? this.refs.Login.yourFunction(). How about accessing the state of the child – for example if you wanted to check if ‘isShowing’ is true for the about component so you can render the about popup in home? Use this.refs.Login.state.isShowing.

Seems simple right? It is – but it can get confusing when you have children of children of children, with various sets of parents, all of which have their own props, refs and states. Sometimes it can be a bit of a pain to transfer data from a great grandchild to a sibling, since you might have to pass data all the way up to the closest ancestor, then back down to the child...etc. As long as you keep your project organized from the start, you'll get the hang of it. It’s pretty slick once you get going. Passing data around from component to component is most of what is happening in React, so hopefully this helps you jump start your next project. Best of luck and happy coding!