React is a modular, front-end web development framework that has surged in popularity. I have to admit, when I first encountered the vagaries of its execution I was somewhat thrown off, but I have since grown to love it.
At its most conventional, React applications flow from top level - or parent - components to child components. This modular approach epitomizes separation of concerns and makes any individual application highly readable. Traditionally, parent components pass information down to to child component in the form of props. Props represent read-only pieces of data. Here is an an example in a sample react application:
Ignore the portion of the code identified with "this.state" for the time being (but it will come back later). What is important to note is that this SampleParent component is rendering a div that reads "Sample Parent Component" with a SampleChild component included. INSIDE of SampleChild we have passed the "prop" sampleProp and given it a value of "This is a sample prop." By passing the prop to the child component it guarantees that we can access that prop in the child component like so:
Look at what is included the SampleChild's render method: we are rendering a div with a paragraph tag, and the text of the paragraph tag is identified as {this.props.sampleProp}. Therefore, our SampleChild component will show us paragraph text that reads "This is a sample prop."
Everything makes sense so far, right? Good. Here is an important question though: what if we want to pass something from the CHILD COMPONENT up to the PARENT COMPONENT. The good news is that React gives us a mechanism to accomplish this through the use of callback functions.
To illustrate this, imagine sample web application that looks like this:
In this sample react application, we have a Parent Component "element", which is a number that starts at 0. Beneath that, we have a Child Component button. When we click the Child Component button, we want the Parent Component element to increment by 1 (0...1...2...3). This requires us to pass something from the child to the parent. To do this, we must first pass a callback function to the Child Component. Look at the code here:
Look at this code closely. The first thing you'll see is that we are giving our parent component an initial state of a number set to zero. In our render method, we are rendering a div that displays the current state of number. Beneath that, we are rendering the SampleChild component and PASSING it a prop. The prop we are passing - incrementTime - is actually a function defined in our ParentComponent. If you look at the function defined above our render method you can see that when called it sets the state to the current value of state plus one.
So far, everything we have done is here is the normal way of passing information from parent to child. We have a top level parent component that renders a child component, and we are passing a prop down to our child component that is the value of a function.
To achieve the effect we want - to click our child component button and increment the parent component element by one - here is what our child component will look like:
In the render method of our child component we have added an event handler of onClick that will trigger this.props.incrementTime. We know from the previous code that this.props.incrementTime is a function passed down from our parent component. When we click the child component button we trigger the callback function which THEN changes the state of the parent component. If you click the button, you should see the parent component element like so:
Top comments (0)