Getting the data inside my array

Question

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

The problem is I can see with the React devtools I have inside my props the stream with 20 objects inside. I can visualize using JSON.stringify but cannot do a map or a for loop because I cannot use length. When I try to map I get 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)

And with the ReactDevTool

My error with map

Just a guess, I think it might be rendering initially before the props are fully passed down. Try adding in a check to see if this.props.streams is undefined, and only attempt the map if it exists. — Jake Haller-Roby
– Jake Haller-Roby, Commented May 31, 2016 at 0:23
I try it and get props undefined caused. So I change it for a react class and get the same results map undefined. — EQuimper
– EQuimper, Commented May 31, 2016 at 0:27
I have try this one const StreamsList = (props) => { return ( <div> {JSON.stringify(this.props.streams)} </div> ); }; I get props undefined and when I try this one class StreamsList extends React.Component { render() { return ( <div> {JSON.stringify(this.props.streams)} </div> ); } } I get the same thing of my first attempt all the data show on the page but can't use map. I'm sure I miss something like I say I start learning react and redux ;( — EQuimper
– EQuimper, Commented May 31, 2016 at 0:39

Jake Haller-Roby · Accepted Answer · 2016-05-31 00:47:09Z

1

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;

answered May 31, 2016 at 0:47

Jake Haller-Roby

6,4381 gold badge21 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

EQuimper Over a year ago

Thank so I've missing to have a empty array at first ?

Jake Haller-Roby Over a year ago

Yeah, the component is rendering before it has all the data, so the array starts as undefined. When the data arrives, react re-renders and fills in the information.

EQuimper Over a year ago

This is because of my onEnter action I put on the route ? Cause this is the first that happen to me.

EQuimper · Accepted Answer · 2016-05-31 06:12:14Z

I find a other way.

StreamApp.js

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

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

const StreamsApp = ({ streams, err, isFetched }) => {
    if (!isFetched) {
        return <h1>Loading...</h1>;
    } else if (err === null) {
        return (
            <div>
                Streaming
                <StreamsList streams={streams} />
            </div>
        );
    } else {
        return <h1>Cannot find streams</h1>;
    }
};

const mapStateToProps = (state) => state.streams;

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

export default connect(mapStateToProps)(StreamsApp);

StreamsList.js

import React from 'react';
import { Link } from 'react-router';
import { GridList } from 'material-ui/GridList'; // http://www.material-ui.com/#/components/grid-list
/*>>>>>>=============================================<<<<<<*/
import StreamsListSingle from './StreamsListSingle';
/*>>>>>>=============================================<<<<<<*/

const StreamsList = ({ streams }) => {
    return (
        <div style={styles.root}>
            <GridList
                cellHeigth={200}
                cols={4}
                style={styles.gridList}>
                {streams.map((stream) => (
                    <Link
                        to={`/streams/${stream.channel.name}`}
                          key={`${stream._id}_Link`}
                          params={stream.channel.name}>
                        <StreamsListSingle key={stream._id} {...stream} />
                    </Link>
                ))}
            </GridList>
        </div>
    );
};

export default StreamsList;

const styles = {
    root: {
        display: 'flex',
        flexWrap: 'wrap',
        justifyContent: 'space-around'
    },
    gridList: {
        width: 'max',
        height: 'auto',
        marginBottom: 24
    }
};

Collectives™ on Stack Overflow

Getting the data inside my array

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related