title: how to get callback from child to parent class in react-redux?
body: <p>I have to render few tabs. ONclick of it, it should get highlighted. I have tabList object coming from reducer (hard-coded value). onclicking of a tab a action is generated which set the "state" with clicked tab object(I call it "activeTab").</p>
  
  <p>while rendering the tabList (all the tabs) I am checking if "rendered_tabid == active_tabid" then add a class "active" (it is conditional basis)</p>
  
  <p><strong>active-tab-reducer.js</strong></p>
  
  <pre><code>export const tabReducer = () =&gt; {
      return [
        {
          id: 1,
          name:"Dental Page",
          url: '#dentalPage'
        },
        {
          id: 2,
          name:"Vision Page",
          url: '#visionPage'
        },
        {
          id: 3,
          name:"Other page Tab",
          url: '#OtherPage'
        }
      ]
  }
  
  
  const activeTabReducer = (state = {}, action) =&gt; {
    switch(action.type) {
      case "TAB_SELECTED": return action.payload;
        break;
    }
    return state;
  }
  
  export default activeTabReducer;
  </code></pre>
  
  <p><strong>(combined-reducer) index.js</strong></p>
  
  <pre><code>import {combineReducers} from 'redux';
  import activeTabReducer, {tabReducer} from './active-tab-reducer';
  
  const allReducers = combineReducers({
    tabList: tabReducer,
    activeTab: activeTabReducer
  });
  
  export default allReducers;
  </code></pre>
  
  <p><strong>(action) index.js</strong></p>
  
  <pre><code>export const selectTab = (tab) =&gt; {
    console.log('action invoked', tab);
    return {
      type: "TAB_SELECTED",
      payload: tab
    }
  } 
  </code></pre>
  
  <p><strong>tablist.js</strong></p>
  
  <pre><code>import React from 'react';
  import {connect} from 'react-redux';
  import {bindActionCreators} from 'redux';
  import {selectTab} from '../actions/index';
  import TabsListItem from './tabsListItem';
  
  class TabList extends React.Component {
    constructor(props){
      super(props);
    }
  
    createTabItems(){    
      return this.props.tabList.map((item, i) =&gt; {
        return (
          &lt;TabsListItem key={i} tabList={item} /&gt; 
        )
      });
    }
  
    render() {
  
      return (
        &lt;div id="layout-header" className="layout-header"&gt;
          &lt;div id="header" className="header"&gt;
            &lt;ul className="tabs tabs--horizontal"&gt;                  
              {this.createTabItems()}    
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  };
  
  function mapStateToProps(state) { 
    return {
      tabList: state.tabList,
      activeTab: state.activeTab      
    }
  }
  function matchDispatchToProps(dispatch){
    return bindActionCreators({selectTab: selectTab}, dispatch);
  }
  export default connect(mapStateToProps, matchDispatchToProps)(TabList);
  </code></pre>
  
  <p><strong>tabListItem.js</strong></p>
  
  <pre><code>import React from 'react';
  class  TabListItem extends React.Component {
    constructor(props){
      super(props);
      console.log(this.props.tabList)
    }
  
    render() {   
      return (
        &lt;li onClick={() =&gt; this.props.selectTab(this.props.tabList)}
            className={"tab  "+((this.props.activeTab.id==item.id)?'active':'')+""+( (this.props.activeTab.id==undefined) &amp;&amp; (item.id == 1)?'active':'' ) 
            role="presentation" className={"tab  " }&gt;
            &lt;a href="#"&gt; 
              &lt;div className="tab__label"&gt;   
                &lt;div className="tab__label__value"&gt;{this.props.tabList.name}&lt;/div&gt;
              &lt;/div&gt;
            &lt;/a&gt;
        &lt;/li&gt;        
      );
    }
  };
  export default TabListItem;
  </code></pre>
  
  <p>when I click any tab (from tabListItem), a action TAB_SELECTED action should dispatch, which set the state with "activeTab" object.</p>
  
  <p>How to generate action from child?</p>