Error : React JS can not read the property

Question

I have jsx class and i'm trying to display some contact data which retrive from API call but once i added this.state.contacts.map function it gives me an error, saying TypeError: Cannot read property 'contacts' of null

import { Component, PropTypes } from 'react';
import { FetchDetails } from '../api_call/apis.js';

export default class FriendRight extends Component {

  getInitialState() {
    return {
      contacts: []
    }
  }

  handleClick() {
    FetchDetails().initialize().then(function(results) {
      this.setState({
        contacts: results.contact
      });
    }.bind(this));
  }

  render(){
    var items = this.state.contacts.map(function(item){
      return <a href="#" className="list-group-item ">
        <h4 className="list-group-item-heading">{item.fullName}</h4>
      </a>;
    });

    return(
      <div>
        <ul class="list-group">
          <li className="list-group-item"><button type="button" className="btn btn-default" onClick={this.handleClick}>Yahoo</button></li>
          <li className="list-group-item"><button type="button" className="btn btn-default">Gmail</button></li>
          <li className="list-group-item"><button type="button" className="btn btn-default" >Outlook</button></li>
          <li className="list-group-item"><button type="button" className="btn btn-default" >Facebook</button></li>
          <li></li>
        </ul>
      </div>
    );
  }

}

Once i change code like below then the error got fixed. but then there is error, Uncaught TypeError: Cannot read property 'setState' of null

 import { Component, PropTypes } from 'react';
import { FetchDetails } from '../api_call/apis.js';

export default class FriendRight extends Component {

  getInitialState() {
    return {
      contacts: []
    }
  }

  handleClick() {
    FetchDetails().initialize().then(function(results) {
      this.setState({
        contacts: results.contact
      });
    }.bind(this));
  }

  render(){
    if(this.getInitialState.length > 0){
      var items = this.state.contacts.map(function(item){
        return <a href="#" className="list-group-item ">
          <h4 className="list-group-item-heading">{item.fullName}</h4>
        </a>;
      });
    }

    return(
      <div>
        <ul class="list-group">
          <li className="list-group-item"><button type="button" className="btn btn-default" onClick={this.handleClick}>Yahoo</button></li>
          <li className="list-group-item"><button type="button" className="btn btn-default">Gmail</button></li>
          <li className="list-group-item"><button type="button" className="btn btn-default" >Outlook</button></li>
          <li className="list-group-item"><button type="button" className="btn btn-default" >Facebook</button></li>
          <li>{this.getInitialState.length > 0 ? items : ""}</li>
        </ul>
      </div>
    );
  }

}

Answer 1

Do not use getInitialState() in a es6 class. To fix this issue init the state on the constructor().

Just like this:

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor() {
    this.state = {
      contacts: []
    };
  }

  render() {
    const { contacts } = this.state;

    return (
      <ul>
        {
          contacts.map((contact, key) => {
            return (<li key={ key }>{ contact.name }</li>);
          })
        }
      </ul>
    );
  }
}

export default MyComponent;

Another way to handle this is a simple or clause in the render() function. Instead of contacts.map(() => { you can write (contacts || []).map(() => {.