Emanuel Quimper Emanuel Quimper - 6 months ago 17
Javascript Question

Getting the data inside my array

I try to make a streaming app with the help of the Twitch Api. I use React and Redux. This is my first real app I try to build with redux so I maybe miss some stuff.

My problem is I can see with the React devtools I have inside my props the streams with 20 object inside. I can visualize with JSON.stringify but cannot do map or a for loop because I cannot use length. When I try map I got map is not a function.

streamReducer.js

import * as types from '../constants/';
/*>>>>>>=============================================<<<<<<*/
const streamReducer = (streams = { isFetched: false }, action) => {
switch (action.type) {
case `${types.RECEIVE_STREAMS}_PENDING`:
return {};
case `${types.RECEIVE_STREAMS}_FULFILLED`:
return {
streams: action.payload,
err: null,
isFetched: true
};
case `${types.RECEIVE_STREAMS}_REJECTED`:
return {
streams: null,
err: action.payload,
isFetched: true
};
default:
return streams;
}
};
/*>>>>>>=============================================<<<<<<*/
export default streamReducer;


StreamApp.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
/*>>>>>>=============================================<<<<<<*/

import StreamsList from '../components/StreamsList';
/*>>>>>>=============================================<<<<<<*/

const StreamsApp = React.createClass ({
render() {
return (
<div>
Streaming
<StreamsList {...this.props.stream} />
</div>
);
}
});

const mapStateToProps = (state) => ({ stream: state.stream });

/*>>>>>>=============================================<<<<<<*/

export default connect(mapStateToProps)(StreamsApp);


routeActions.js

import {
reqStreams
} from './streamActions';
/*>>>>>>=============================================<<<<<<*/
export const boundAllStreams = (nextState, replaceState) => reqStreams(nextState);


my route

import React from 'react';
import { Router, Route, IndexRoute } from 'react-router';
import { bindActionCreators } from 'redux';
/*>>>>>>=============================================<<<<<<*/

import { history } from '../store/configureStore';
import store from '../store/configureStore';
import * as routeActions from '../actions/routeActions';
/*>>>>>>=============================================<<<<<<*/

import App from '../containers/App';
import StreamsApp from '../containers/StreamsApp';
/*>>>>>>=============================================<<<<<<*/

import Home from '../components/layout/Home';
import Games from '../components/layout/Games';
import NoMatch from '../components/layout/NoMatch';
/*>>>>>>=============================================<<<<<<*/

const boundRouteActions = bindActionCreators(routeActions, store.dispatch);

export default (
<Router history={history}>
<Route path="/" component={App}>
<IndexRoute component={Home} />
<Route path="streams" component={StreamsApp} onEnter={boundRouteActions.boundAllStreams}/>
<Route path="games" component={Games}/>
<Route path="*" component={NoMatch}/>
</Route>
</Router>
);


StreamsList.js

import React from 'react';
/*>>>>>>=============================================<<<<<<*/

const StreamsList = ({ streams }) => {
console.log(streams);
return (
<div>
{JSON.stringify(streams)}
{streams.map((stream) => {
return (
<div>
<h1>{stream.game}</h1>
</div>
);
})}
</div>
);
};

export default StreamsList;


Here you can see what I got we the JSON.stringify(streams)

Here you can see what I got we the JSON.stringify(streams)

And with the ReactDevTool

React DevsTool

My error with map
My error with map

Answer

I'm writing an answer instead of continuing the conversation in the comments, because this is difficult to type in a confined space;

Please try:

const StreamsList = ({ streams }) => {
    console.log(streams);
    streamArray = [];
    if(streams){
        streamArray = streams.map((stream) => {
            return (
                <div>
                    <h1>{stream.game}</h1>
                </div>
            );
        });
    }

    return (
        <div>
            {JSON.stringify(streams)}
            {streamArray}
        </div>
    );
};

export default StreamsList;