#reactjs #js #nodejs Nested Components (5 de N)

In the previous chapters (3 and 4) we have seen how to define components and them properties.

In today’s post we are going to take a look on how we can nest components and how to pass down the information. We are going to structure the project, and this sample, inside the ‘components’ folder and we are going to create a ‘Books’ folder where we will place our books related components.

Lets begin with the following component that will show a list of books and later on lets improve it.

Inside the render function we have define a books object that will use the map function to indicate how to render each book and will return a li element.

var React = require('react');
var BookList = React.createClass({
    getInitialState : function(){
        return {books : [
        {title:'Javascript: the definitive guide.',publisher:'O\'really',href:'http://www.amazon.com/JavaScript-Definitive-Guide-Activate-Guides/dp/0596805527/ref=sr_1_3?s=books&ie=UTF8&qid=1454320709&sr=1-3&keywords=javascript'},
        {title:'Javascript: the good parts.',publisher:'O\'really',href:'http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742/ref=pd_bxgy_14_img_2?ie=UTF8&refRID=0D2QAFFJY18NZYGVCW8Q'}
        ]}
    },
    render: function(){
       var books = this.state.books.map((book,key)=><li key={key}> <a href={book.href}>{book.title} published by {book.publisher} </a></li>);
        return (
<div>

<ul>
                    {books}
                </ul>

            </div>

        );
    }
});
module.exports = BookList;

If we include it in our ‘mainComponent’, the result will show the list of predefined books.

var React = require('react');
var BookListItem = React.createClass({
    render: function(){
        return (
            <li>
                   <a href={this.props.book.href}> {this.props.book.title} published by {this.props.book.publisher}</a>
        </li>
    
        );
    }
});
module.exports = BookListItem;

As we can see its a really simple component but in the render function we are using props that are not defined inside the component.

Now, lets modify the components and lets pass it to the soon.


var React = require('react');
var BookListItem = require('./bookListItemComponent.js')
var BookList = React.createClass({
    getInitialState : function(){
        return {books : [
        {title:'Javascript: the definitive guide.',publisher:'O\'really',href:'http://www.amazon.com/JavaScript-Definitive-Guide-Activate-Guides/dp/0596805527/ref=sr_1_3?s=books&ie=UTF8&qid=1454320709&sr=1-3&keywords=javascript'},
        {title:'Javascript: the good parts.',publisher:'O\'really',href:'http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742/ref=pd_bxgy_14_img_2?ie=UTF8&refRID=0D2QAFFJY18NZYGVCW8Q'}
        ]}
    },
    render: function(){
       var books = this.state.books.map((book,key)=>
        <BookListItem book={book}/>
       );
        return (
            <div>
                <ul>
                    {books}
                </ul>
            </div>
        );
    }
});
module.exports = BookList;

We had modified the function inside the map to use the child component and inside the tag we are defining the prop that will be used inside the component.

In the following chapter we are going to do a small break to talk about mongodb and later will pass to talk about Forms.

Hope the post helps.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s