Uncaught TypeError: Cannot read property 'map' of undefined in reactjs

Question

import React from 'react';
import ReactDOM from 'react-dom';
var axios = require('axios');
class Application extends React.Component {        
  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);        
    this.state = {
      dropdownItems: []
    };
  }        
  deleteDd(index) {
    let dropdownItems =  this.state.dropdownItems.filter(item => item!==index);
    this.setState({dropdownItems: dropdownItems});
  }        
  handleClick() {
    let dropdownItems = [...this.state.dropdownItems];
    dropdownItems.push(dropdownItems.length);
    this.setState({dropdownItems: dropdownItems});
  }        
getInitialState() {
    return {
      company: []
    }
  }
//trying to get json data into dropdown by passing the json object into the url         
  componentDidMount(){var _this = this;
    this.serverRequest = axios

        .get("myurl")
        .then(function(result) {    
          _this.setState({
            company: result.data.company        
          });
          //console.log(jobs);
        })
  }        
  componentWillUnmount(){
    this.serverRequest.abort();
  }
  render() {
    let dropdowns = this.state.dropdownItems.map(item =>
      (<MyDropdown key = {item} num = {item} onDeleteMe ={this.deleteDd.bind(this, item)} />));        
    return (
    <div>
    <h1 className="text-left page-title">Higher</h1>
    <h2 className="text-left">CTR</h2>
    <h3 className="text-left">ABC</h3>            
    <div>       
            <form>
    <select className="dropdown menu dropdown-style" data-dropdown-menu>
                        <option defaultValue>Choose one</option>
                        <option value="test">test</option>
                        <option value="test1">test1</option>               
                    </select>
      //here is where all my json data resides in company              
        <h1>Companies!</h1>
        {this.state.company.map(function(company) {
          return (
            <div key={company.id} className="company">                      
                {company.Company}      
                                 </div>);})}
            </form>

I am getting this error "Uncaught TypeError: Cannot read property 'map' of undefined" I am trying to load json data into a dropdown please help. I have tried all the possible ways i can but still not able to figure what the problem is, any help is very much appreciated thanks.

Possible duplicate of [Cannot read property 'map' of undefined](http://stackoverflow.com/questions/24706267/cannot-read-property-map-of-undefined) — Hardik Modha, Mar 17 '17 at 04:49
Possibly `this.state.company` is undefined when you are trying to map, because it is being populated asynchronously. Just put a check whether the`this.state.company` is undefined or not. Try `this.state.company && this.state.company.map.....` — Hardik Modha, Mar 17 '17 at 04:51

score 0 · Accepted Answer · answered Mar 17 '17 at 06:27

When you extend React.Component to create a React component then getInitialState does not initialise the state variable. You need to do it in constructor. Hnece when you initialise company as an empty array to state with getInitialState(), it did not set it and hence initially this.state.company is undefined.

Initialise the state in constructor and it should be fine. Also to avoid any problems you can perform a check for undefined before mapping like {this.state.company && this.state.company.map(function(company) {...})}

import React from 'react';
import ReactDOM from 'react-dom';
var axios = require('axios');
class Application extends React.Component {        
  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);        
    this.state = {
      dropdownItems: [],
      company: []
    };
  }        
  deleteDd(index) {
    let dropdownItems =  this.state.dropdownItems.filter(item => item!==index);
    this.setState({dropdownItems: dropdownItems});
  }        
  handleClick() {
    let dropdownItems = [...this.state.dropdownItems];
    dropdownItems.push(dropdownItems.length);
    this.setState({dropdownItems: dropdownItems});
  }        

//trying to get json data into dropdown by passing the json object into the url         
  componentDidMount(){var _this = this;
    this.serverRequest = axios

        .get("myurl")
        .then(function(result) {    
          _this.setState({
            company: result.data.company        
          });
          //console.log(jobs);
        })
  }        
  componentWillUnmount(){
    this.serverRequest.abort();
  }
  render() {
    let dropdowns = this.state.dropdownItems.map(item =>
      (<MyDropdown key = {item} num = {item} onDeleteMe ={this.deleteDd.bind(this, item)} />));        
    return (
    <div>
    <h1 className="text-left page-title">Higher</h1>
    <h2 className="text-left">CTR</h2>
    <h3 className="text-left">ABC</h3>            
    <div>       
            <form>
    <select className="dropdown menu dropdown-style" data-dropdown-menu>
                        <option defaultValue>Choose one</option>
                        <option value="test">test</option>
                        <option value="test1">test1</option>               
                    </select>
      //here is where all my json data resides in company              
        <h1>Companies!</h1>
        {this.state.company && this.state.company.map(function(company) {
          return (
            <div key={company.id} className="company">                      
                {company.Company}      
                                 </div>);})}
            </form>

Uncaught TypeError: Cannot read property 'map' of undefined in reactjs

1 Answers1