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.
Jtorrecilla's blog 