React-Redux - Fetching data from Firebase

Question

Im trying to use Firebase to catch some data and display on my web app, but I'm not understanding how to do it. I'm using reduxThunk. Im getting the error id is not defined. This is my component

trabalhos.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../actions';


class Trabalhos extends Component {

    componentWillMount(){
        this.props.fetchData();
    }

    renderList({id,tec,title}){
        return(
            <li className="list-group-item" key={id}>
                <p>{title}</p>
                <p>{tec}</p>
            </li>
        )
    }

    render(){
    return (

        <div>
            <div className="trabalhos">
                <div className="trabalhos_caixa">
                    <div className="row">
                        <div className="col-xs-12">
                            <ul className="no_pad">
                                {this.renderList()}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

}


function mapStateToProps(state){

return { fetch: state.fetch };
}


export default connect(mapStateToProps, actions)(Trabalhos);

this is my Action

actions/index.js

import Firebase from 'firebase';
import { FETCH_DATA } from './types';

const Data = new Firebase('https://portofoliofirebase.firebaseio.com');

export function fetchData(){
return dispatch => {
    Data.on('value', snapshot => {
        dispatch({
            type: FETCH_DATA,
            payload: snapshot.val()
        });
    });
}

}

this is my index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { Router, browserHistory } from 'react-router';
import reducers from './reducers';
import routes from './routes';
import * as **firebase** from 'firebase';
import **reduxThunk** from 'redux-thunk'

const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);
const store = createStoreWithMiddleware(reducers);


ReactDOM.render(
<Provider store={store}>
<Router history={browserHistory} routes={routes} />
</Provider>
, document.querySelector('.container'));

This is my fetch_reducer.js

import { FETCH_DATA } from '../actions/types';

export default function(state = [], action) {
switch(action.type){
    case FETCH_DATA:
        return action.payload.data;     
}

return state;
}

This is my Reducer index.js

import { combineReducers } from 'redux';
import fetchReducer from './fetch_reducer';

const rootReducer = combineReducers({

fetch: fetchReducer

});

export default rootReducer;

Answer 1

You are calling this.renderList() without any arguments, so id at <li className="list-group-item" key={id}> indeed is not defined. I guess maybe you want to use this.props.payload.data.map(this.renderList)?