CODEWITHSUNDEEP
reactjsreduxreact-redux
a_zatula
a_zatula

Reputation: 458

Incorrect integration into React props

I am trying to implement my first React-Redux app and got TypeError: Cannot read property 'map' of undefined from bundle.js. I guess it is associated with jokes array and its incorrect integration into my React jokeList component props:

import React from 'react';
import {connect} from 'react-redux';

class ListOfJokes extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    const {jokes} = this.props;
    return (
      <ul>
        {jokes.map(joke => (<li>joke</li>))}
      </ul>
    )
  } 
}

const mapStateToProps = state => ({
  jokes: state.jokes
})

export default connect(mapStateToProps, null)(ListOfJokes);

What is actually wrong with it?

Upvotes: 0

Views: 27

Answers (2)

Ikram Ud Daula
Ikram Ud Daula

Reputation: 1321

Use a conditional loop to check jokes has or not. when sets the joke then it will mapping.

{jokes.length !== 0 ?
   jokes.map(joke => (<li>joke</li>)) : (<li>no jokes</li>)
}

Upvotes: 1

Sylvain
Sylvain

Reputation: 19269

Are you sure that store.jokes always contains something? If you fetch the data asynchronously, then on the first render store.jokes may be undefined. If that's the case then do:

const mapStateToProps = state => ({
  jokes: state.jokes || []
})

Upvotes: 1

Related Questions