React JS Nested Components

React JS Nested Components: Nested components in React.js help you to create more complex view element structures. Earlier we have learned about React components. And just as a reminder, here is how you would go about creating one.

var Component React.createClass({
render: function(){
return (
<Something></Something>
)}});

This is just a basic component that returns a set of <Something> HTML tags. I know, you’re probably still getting used to returning something that looks like an HTML tag without quotes around it, but by this time it should start looking more familiar 🙂 As you may have imagined, this is the type of code structure you will be working a lot within React JS. Most other things have come from it. If you’ve ever worked with jQuery, this component structure can be comparable to jQuery.

$(".class").on("click", function() {/
*do something*/});

Here we have a callback function that returns the event has finished executing. In react, we’re returning an HTML element that will usually be placed inside our application’s structure on the front end. In the case of React components, it’s just a JavaScript object that contains render function and has a return statement that returns transpired JSX (JavaScript XML) code. That’s what converts <Something> tag into EcmaScript 5 that browsers can understand.

Nesting React JS Components Examples

What should be in a render function and in return statement depends on the purpose of your application. In this example, for the sake of clarity, let’s call these objects Parent and Child respectively. An actual pair of names, if you were writing an application, could be something like Friend and Friend List. Or Customer and Customer Property.

Using this pattern, you can implement a basic view functionality. First, let’s create the least building block of the pattern – the child.

var Child = React.createClass({
render: function() {
return
<BUTTON onClick {this.props.onClick }>
{this.props.text } </BUTTON>
}
}) ;

In this case, the child is a basic component that returns a button element. The button provides an onClick event that will be executed by the method this.props.onClick.

Let’s now create its Parent class that should respond, and use Child as the object it will return. I highlighted Child to make sure it’s easy to see how the Child component is tied to Parent.

var Parent = React.createClass({
render: function() {
return(
<Child onClick = {this.handleClick} text ={this.state.child Text}/>
);
},
handle Child Click: function(event) {
// In this method, you can access props
// that were passed to the Child, using this.state property
var child_text = this.state.childText;
// To access target element of the click:
var target = event.target;
}
}) ;

Notice that you can access a child’s text from the handleChildClick method within Parent container. The Parent and Child containers are tied by the props passed into the text attribute on the Child container. Whatever you pass into the Child (which is located within Parent) will be automatically accessible via the parent container. So props are really what establishes the relationship between the two.

React is a relatively new library. However, it does use one important JavaScript function that you simply must know how to use, if you ever plan on using Parent and Child dynamic in your reactive application. And this standard JavaScript function is the map method, that natively exists on all objects of type Array. If you’ve ever worked with JavaScript arrays before, you may have at least heard of the map method. All it does is creates a new array, calls the callback function on each item and fills the new array with the result of modifications that the callback function has applied to each item from the original array.

So in short, Array.map takes all items and applies a custom operation on them. Then, it simply returns the new, modified data set as a new array. How does this help us in terms of writing Parent-Child components in the React library? I can demonstrate this by providing the following example where we will use multiple Children in a Single Parent.

I’ll keep the Child component exactly the same for this example, so we can keep things simple. Notice the new usage of the array’s map function within the newly updated Parent component.

var Parent = React.createClass({
/ Set defaults for multiple children array /
getChildren State: function() {
return children Data:[
{ check Text: "Click me 1!", child Number: 1 },
(child Text;"Click me 2t", child Number: 2}
]};
},
render: function()[
return(
var children - this.state.childernData.map(function(
data, index){
return <Child onClick=(this.handleClick
bind(null, child Data))}
text = {child Data.child Text)/;/>;
}.bind(this));
return <DIV>{children]</DIV>;
) ;
}
handle Child Click: function(event) {
// In this method, you can access props
// that were passed to the Child, using this.state propert
var child_text=this.state.childText;
// To access target element on the click
var target = event.target;
}
}) ;

Now, I purposely created these generic examples to show you the association between child and parent, because it’s not as trivial as simply nesting HTML elements in one another. In react JS, this link is established programmatically, as shown in the example above.

In a real-world scenario, you will be building components that represent actual elements in your application, like alerts, friends lists, messages, comments and buttons. But these examples that were shown here are the basic building blocks of reactive programming.

I know it might seem like a hassle to learn all of this, but really, once you program a few of these components, you will see the versatility of React, because it’s like embedding custom programming into your everyday HTML elements, having full control over the data flow, and utilizing Virtual DOM which is lightning fast at updating only areas of applications that need updating.