CODEWITHSUNDEEP
arraysjsonreactjs
niinja no
niinja no

Reputation: 309

I'm having trouble looping through an array

I'm using MyJSON to create a store for my data and im having trouble looping through it

i've tried .map(), .forEach but i cannot for the life of me, map over the array of objects.

TypeError: Cannot read property 'map' of undefined

the JSON store looks like this

const Leaderboard = (props) => {

    useEffect(() => {
        props.fetchScores();
    },[]);

    const renderList = () => {
        props.scores.map(item => {
            return <LeaderboardItem name={item.name} data={item.date} />
        })
    }

    return (
        <div className="leaderboard">
            <h1 className='leaderboard__header'> Leaderboard</h1>
            {renderList()}
        </div>
    );
};

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

export default connect(mapStateToProps, { fetchScores })(Leaderboard);

I'm able to fetch the data, add it to my reducers. When i console.log my props i get this

(5) [{…}, {…}, {…}, {…}, {…}]
0: {name: "ryan", score: 3, date: 1564079441826, id: 1}
1: {name: "ryan", score: 0, date: 1564080251976, id: 2}
2: {name: "ryan", score: 4, date: 1564080621616, id: 3}
3: {name: "ryan", score: 1, date: 1564088666800, id: 4}
4: {name: "ryan", score: 8, date: 1564088919233, id: 5}
length: 5
__proto__: Array(0)

shouldn't I be able to map over the array and return each object?

      10 | },[]);
      11 | 
      12 | const renderList = () => {
    > 13 |     props.scores.map(item => console.log(item))
         | ^  14 | }
      15 | 
      16 | return (

export default (state = {}, action) => {
switch(action.type) {
    case FETCH_SCORES:
        return { ...state, ...action.payload }
    default:
        return state;
};

};

images :

Redux-dev-tools-image1

Redux-dev-tools-image1

console.log

Upvotes: 0

Views: 40

Answers (3)

John Ruddell
John Ruddell

Reputation: 25842

to render a list of items you need to actually return JSX in your map

const renderList = () => {
  props.scores.map(item => <div key={item.id}>{item.name}</div>)
}

You should read up on best practices for rendering lists of elements in react.

Edit

Since scores is undefined, you need to make sure that you are referencing things correctly.

Is scores the key defined in combineReducers? aka something like combineReducers({scores: scoresReducer})

Update your reducer to store what you want to store all the time. dont change the datatypes

const defaultState = {
  scores: []
}
export default (state = defaultState, action) => {
  switch(action.type) {
    case FETCH_SCORES:
        return { ...state, scores: ...action.payload }
    default:
        return state;
  };
}

this assumes action.payload is an array of scores, adjust accordingly if its not

Upvotes: 1

Sultan H.
Sultan H.

Reputation: 2938

Can you consider this:

        props.scores && props.scores.map(item => {
            return <LeaderboardItem name={item.name} data={item.date} />
        })

Upvotes: 0

forgo
forgo

Reputation: 952

map creates another array as a transformation of the original array. You are simply console.log'ing over each item which would be a use for forEach and not map.

The return value of a console.log is undefined and probably causing problems while rendering an array of [undefined, undefined, ...]

Upvotes: 0

Related Questions