The application will dislay a some catalogs, and each catalog has title image, description. 

 

Catalog:

import React from 'react';import AppStore from '../stores/app-store';import CatalogItem from './app-catalogitem';function getCatalog(){  return { items: AppStore.getCatalog() }}class Catalog extends React.Component {  constructor(){    super();    this.state = getCatalog()  }  render(){    let items = this.state.items.map( item => {      return 
         });    return (      
     
              { items }      
     
    )  }}export default Catalog;

 

Each Catalog render CatalogItem:

import React from 'react';import AppActions from '../actions/app-actions';import CartButton from './app-cart-button';export default (props) => {  return (      
     
          
      
{ props.item.title }
          
                
      
{ props.item.summary }
          
      
${ props.item.cost }
          
            
     
  )}

 

CartButton handle the click event whcih passed in:

import React from 'react';export default (props) => {  return (                    { props.txt }          )}