Cannot read property 'map' of undefined ( ReactJS & AJAX)

Question

Try show in table my array. Array get from AJAX request in Action. I'm using Redux

class IncomeProfile extends Component {
  constructor(props) {
    super(props)
  }

  componentDidMount() {
    this.props.IncomeListProfile();
      }

render() {
        var elems = this.props.items.course_list;
      console.log(elems);
        return (
          <div>
            <table>
              {elems.map((item) => (

              <tr key={item.course_id}>
                <td>{item.name}</td>
              </tr>

              ))}
            </table>
          </div>
        )
      }

}

const mapDispatchToProps = function(dispatch) {
  return {
      IncomeListProfile: () => dispatch(IncomeProfileList())
      }
  }

const mapStateToProps = function(state) {
  var mystore = state.toArray();
  //console.log(mystore[6]);
  return {
     items: mystore[6]
        };

}
export default connect(mapStateToProps, mapDispatchToProps)(IncomeProfile);

Console.log first print "undefined" then it print this:

Try add condition in render method if (elems) { } not helps

The error message means elems is not definied in the runtime. Hope this helps debugging. — elementzero23
– elementzero23, Commented Jan 26, 2017 at 10:19

Shubham Khatri · Accepted Answer · 2017-01-26 14:02:24Z

1

Make use of the following

var elems = this.props.items['course_list'];
 var copy = Object.assign({}, elems); 
 console.log(elems.course_list);

answered Jan 26, 2017 at 14:02

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

Collectives™ on Stack Overflow

Cannot read property 'map' of undefined ( ReactJS & AJAX)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related