title: json parsing error in reactjs map function does not work
body: <p>Hi I have json object as following :</p>
  
  <pre><code>{
    "id":1,"name":"Save the Queen - Corporate Carrom Tournament - 2018", "date":"28 may 2018","address":"Active Arena, Opposite Prestige Tech Park (Behind Croma) Outer Ring Road, Marathahalli, Kadubeesanahalli, Panathur,, Bengaluru, Karnataka 560103","banner":"https://preview.ibb.co/fTSnKn/badminton_blr.jpg", 
  
  
    "sports":[
        {"name":"Badminton","categoreis":[
          {"name":"Men Singles","fee":"600","gst":"108","formid":102,"form":[{"label":"Name:","paramname":"name","type":"text"},
          {"label":"Email:","paramname":"email","type":"text"},
          {"label":"Phone:","paramname":"phone","type":"text"}]
          },
          {"name":"Men Doubles","fee":"1200","gst":"216","formid":103,"form":[{"label":"Name:","paramname":"name","type":"text"},
          {"label":"Email:","paramname":"email","type":"text"},
          {"label":"Phone:","paramname":"phone","type":"text"},
          {"label":"Partner Name:","paramname":"partner_name","type":"text"},
          {"label":"Partner Email:","paramname":"partner_email","type":"text"}]
          },
          {"name":"Women Doubles","fee":"1200","gst":"216","formid":104,"form":[{"label":"Name:","paramname":"name","type":"text"},
          {"label":"Email:","paramname":"email","type":"text"},
          {"label":"Phone:","paramname":"phone","type":"text"},
          {"label":"Partner Name:","paramname":"partner_name","type":"text"},
          {"label":"Partner Email:","paramname":"partner_email","type":"text"}]
          }
      ]
  },
  
  {"name":"Carrom","categoreis":[
          {"name":"Men Singles","fee":"399","gst":"72","formid":105,"form":[{"label":"Name:","paramname":"name","type":"text"},
          {"label":"Email:","paramname":"email","type":"text"},
          {"label":"Phone:","paramname":"phone","type":"text"}]
          },
          {"name":"Men Doubles","fee":"799","gst":"144","formid":106,"form":[{"label":"Name:","paramname":"name","type":"text"},
          {"label":"Email:","paramname":"email","type":"text"},
          {"label":"Phone:","paramname":"phone","type":"text"},
          {"label":"Partner Name:","paramname":"partner_name","type":"text"},
          {"label":"Partner Email:","paramname":"partner_email","type":"text"}]
          },
          {"name":"Women Doubles","fee":"799","gst":"144","formid":107,"form":[{"label":"Name:","paramname":"name","type":"text"},
          {"label":"Email:","paramname":"email","type":"text"},
          {"label":"Phone:","paramname":"phone","type":"text"},
          {"label":"Partner Name:","paramname":"partner_name","type":"text"},
          {"label":"Partner Email:","paramname":"partner_email","type":"text"}]
          }
      ]
  }
  
  ]}
  </code></pre>
  
  <p>But when I parse it inside render function like following I get "Cannot read property 'map' of undefined". Can someone help me where am I making mistake?</p>
  
  <pre><code>this.state.tournament_detail.sports.map(
        function(sport,index){
          if(index==1){
            list1.push(&lt;li class="active"&gt;&lt;a data-toggle="tab" href={"#"+index}&gt;{sport.name}&lt;/a&gt;&lt;/li&gt;);
          }else{
            list1.push(&lt;li&gt;&lt;a data-toggle="tab" href={"#"+index}&gt;{sport.name}&lt;/a&gt;&lt;/li&gt;);
          }
        }
      )
  </code></pre>
  
  <p>I have correctly verified that this.state.tournament_detail is correctly set to json as given above.</p>
  
  <p>Full source code is this </p>
  
  <pre><code>import React,{Component} from 'react';
  import style1 from './../css/main.css';
  import RegisterWindow from './RegisterWindow.js';
  import Modal from 'react-modal';
  import axios from 'axios';
  
  var styles={
    container:{
    boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)",
    textAlign: "center",
    margin:"auto",
    marginTop:"10px",
    borderRadius:"0.5vw",
    padding:"20px"
    },
    content : {
      top                   : '50%',
      left                  : '50%',
      right                 : 'auto',
      bottom                : 'auto',
      marginRight           : '-50%',
      transform             : 'translate(-50%, -50%)'
    }
  }
  Modal.setAppElement('#app')
  
  export default class TournamentDetail extends Component{
  
    constructor(props){
      super(props);
      this.state = {
       modalIsOpen: false,
       no_of_tickets:0,
       net_amount:0,
       tournament_detail:{}
     };
  
     this.openModal = this.openModal.bind(this);
     this.afterOpenModal = this.afterOpenModal.bind(this);
     this.closeModal = this.closeModal.bind(this);
     this.test=this.test.bind(this);
    }
  
    componentWillMount(){
    //  alert('1');
      var self=this;
      axios.get('http://localhost:3000/get-tournament-detail')
        .then(function (response) {
          console.log(response.data);
          self.setState({tournament_detail:response.data});
        }).catch(function (error) {
          console.log(error);
        });
    }
  
    openModal() {
     this.setState({modalIsOpen: true});
   }
  
   afterOpenModal() {
     // references are now sync'd and can be accessed.
     //this.subtitle.style.color = '#f00';
   }
  
   closeModal() {
     this.setState({modalIsOpen: false});
   }
  
  test(event,data){
    event.preventDefault();
    alert(data);
    alert(event.target.value);
    alert('1');
    this.setState({modalIsOpen: false});
  }
  
    render(){
      var self=this;
  
      var list1=[];
      var list2=[];
      JSON.parse(this.state.tournament_detail).sports.map(
        function(sport,index){
          if(index==1){
            list1.push(&lt;li class="active"&gt;&lt;a data-toggle="tab" href={"#"+index}&gt;{sport.name}&lt;/a&gt;&lt;/li&gt;);
          }else{
            list1.push(&lt;li&gt;&lt;a data-toggle="tab" href={"#"+index}&gt;{sport.name}&lt;/a&gt;&lt;/li&gt;);
          }
        }
      )
  
      return (
        &lt;div class="container" style={styles.container}&gt;
  
        &lt;Modal isOpen={this.state.modalIsOpen} onAfterOpen={this.afterOpenModal} onRequestClose={this.closeModal} contentLabel="Example Modal"&gt;
            &lt;RegisterWindow close={this.test}/&gt;
        &lt;/Modal&gt;
  
          &lt;div class="row" style={{borderBottomStyle:"ridge",borderBottomColor:"#0082c8",marginBottom:"10px",paddingBottom:"10px"}}&gt;
            &lt;div class="col-sm-8"&gt;&lt;img style={{width:"100%",height:"100%"}} src={this.state.tournament_detail.banner}/&gt;&lt;/div&gt;
            &lt;div class="col-sm-4"&gt;
              &lt;div class="row"&gt;
                &lt;div class="col" style={{borderBottomStyle:"solid",borderWidth: ".5px"}}&gt;
                    &lt;p style={{textAlign:"left"}}&gt;{this.state.tournament_detail.name}&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row" style={{marginTop:"10px"}}&gt;
                &lt;div class="col" style={{textAlign:"left"}}&gt;&lt;i class="fa fa-calendar"&gt;&lt;/i&gt;  {this.state.tournament_detail.date}&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row" style={{marginTop:"10px"}}&gt;
                &lt;div class="col" style={{textAlign:"left"}}&gt;&lt;i class="fa fa-map-marker"&gt;&lt;/i&gt;    {this.state.tournament_detail.address}&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row" style={{marginTop:"20px"}}&gt;
                &lt;div class="col"&gt;&lt;a href="#" style={{backgroundColor:"#ffc800",padding:"10px",borderRadius:"0.5vw",color:"#707070",textDecoration:"none"}} onClick={this.openModal} &gt;Register&lt;/a&gt; &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
            &lt;div class="col"&gt;
              &lt;p style={{fontSize:"18px",float:"left",fontWeight:"500"}}&gt;Pricing and Offers&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div  style={{borderStyle:"dotted",borderWidth: ".5px"}}&gt;
  
          &lt;ul class="nav nav-tabs"&gt;
            &lt;li class="active"&gt;&lt;a data-toggle="tab" href="#badminton"&gt;Badminton&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a data-toggle="tab" href="#tt"&gt;Table Tennis&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a data-toggle="tab" href="#carrom"&gt;Carrom&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  
          &lt;div class="tab-content"&gt;
             &lt;div id="badminton" class="tab-pane fade in active"&gt;
  
             &lt;div className={style1.elem}&gt;
                 &lt;div class="row"  style={{padding:"20px"}}&gt;
                   &lt;div class="col-sm-8"&gt;
                     &lt;p style={{textAlign:"left"}}&gt; Mens Singles&lt;/p&gt;
                     &lt;p style={{display:"block",textAlign:"left"}}&gt; 399 +GST 72&lt;/p&gt;
                   &lt;/div&gt;
                   &lt;div class="col-sm-4"&gt;&lt;p style={{float:"left"}}&gt;471/-&lt;/p&gt;
                     &lt;a href="#" style={{backgroundColor:"#ffc800",padding:"10px", borderRadius:"0.5vw",color:"#707070",textDecoration:"none"}} onClick={this.openModal}&gt;Register&lt;/a&gt;
                   &lt;/div&gt;
  
                 &lt;/div&gt;
             &lt;/div&gt;
             &lt;div style={{borderBottomStyle:"solid",borderWidth: "thin"}}&gt;&lt;/div&gt;
  
             &lt;div className={style1.elem}&gt;
                 &lt;div class="row"  style={{padding:"20px"}}&gt;
                   &lt;div class="col-sm-8"&gt;
                     &lt;p style={{textAlign:"left"}}&gt; Mens Singles&lt;/p&gt;
                     &lt;p style={{display:"block",textAlign:"left"}}&gt; 399 +GST 72&lt;/p&gt;
                   &lt;/div&gt;
                   &lt;div class="col-sm-4"&gt;&lt;p style={{float:"left"}}&gt;471/-&lt;/p&gt;
                     &lt;a href="#" style={{backgroundColor:"#ffc800",padding:"10px", borderRadius:"0.5vw",color:"#707070",textDecoration:"none"}}&gt;Register&lt;/a&gt;
                   &lt;/div&gt;
  
                 &lt;/div&gt;
             &lt;/div&gt;
             &lt;div style={{borderBottomStyle:"solid",borderWidth: "thin"}}&gt;&lt;/div&gt;
  
             &lt;div className={style1.elem}&gt;
                 &lt;div class="row"  style={{padding:"20px"}}&gt;
                   &lt;div class="col-sm-8"&gt;
                     &lt;p style={{textAlign:"left"}}&gt; Mens Singles&lt;/p&gt;
                     &lt;p style={{display:"block",textAlign:"left"}}&gt; 399 +GST 72&lt;/p&gt;
                   &lt;/div&gt;
                   &lt;div class="col-sm-4"&gt;&lt;p style={{float:"left"}}&gt;471/-&lt;/p&gt;
                     &lt;a href="#" style={{backgroundColor:"#ffc800",padding:"10px", borderRadius:"0.5vw",color:"#707070",textDecoration:"none"}}&gt;Register&lt;/a&gt;
                   &lt;/div&gt;
                 &lt;/div&gt;
             &lt;/div&gt;
  
  
             &lt;/div&gt;
             &lt;div id="tt" class="tab-pane fade"&gt;
  
             &lt;div className={style1.elem}&gt;
                 &lt;div class="row"  style={{padding:"20px"}}&gt;
                   &lt;div class="col-sm-8"&gt;
                     &lt;p style={{textAlign:"left"}}&gt; Mens Singles&lt;/p&gt;
                     &lt;p style={{display:"block",textAlign:"left"}}&gt; 499 +GST 72&lt;/p&gt;
                   &lt;/div&gt;
                   &lt;div class="col-sm-4"&gt;&lt;p style={{float:"left"}}&gt;471/-&lt;/p&gt;
                     &lt;a href="#" style={{backgroundColor:"#ffc800",padding:"10px", borderRadius:"0.5vw",color:"#707070",textDecoration:"none"}}&gt;Register&lt;/a&gt;
                   &lt;/div&gt;
  
                 &lt;/div&gt;
             &lt;/div&gt;
             &lt;div style={{borderBottomStyle:"solid",borderWidth: "thin"}}&gt;&lt;/div&gt;
  
             &lt;div className={style1.elem}&gt;
                 &lt;div class="row"  style={{padding:"20px"}}&gt;
                   &lt;div class="col-sm-8"&gt;
                     &lt;p style={{textAlign:"left"}}&gt; Mens Singles&lt;/p&gt;
                     &lt;p style={{display:"block",textAlign:"left"}}&gt; 399 +GST 72&lt;/p&gt;
                   &lt;/div&gt;
                   &lt;div class="col-sm-4"&gt;&lt;p style={{float:"left"}}&gt;471/-&lt;/p&gt;
                     &lt;a href="#" style={{backgroundColor:"#ffc800",padding:"10px", borderRadius:"0.5vw",color:"#707070",textDecoration:"none"}}&gt;Register&lt;/a&gt;
                   &lt;/div&gt;
  
                 &lt;/div&gt;
             &lt;/div&gt;
             &lt;div style={{borderBottomStyle:"solid",borderWidth: "thin"}}&gt;&lt;/div&gt;
  
             &lt;div className={style1.elem}&gt;
                 &lt;div class="row"  style={{padding:"20px"}}&gt;
                   &lt;div class="col-sm-8"&gt;
                     &lt;p style={{textAlign:"left"}}&gt; Mens Singles&lt;/p&gt;
                     &lt;p style={{display:"block",textAlign:"left"}}&gt; 399 +GST 72&lt;/p&gt;
                   &lt;/div&gt;
                   &lt;div class="col-sm-4"&gt;&lt;p style={{float:"left"}}&gt;471/-&lt;/p&gt;
                     &lt;a href="#" style={{backgroundColor:"#ffc800",padding:"10px", borderRadius:"0.5vw",color:"#707070",textDecoration:"none"}}&gt;Register&lt;/a&gt;
                   &lt;/div&gt;
                 &lt;/div&gt;
             &lt;/div&gt;
  
             &lt;/div&gt;
             &lt;div id="carrom" class="tab-pane fade"&gt;
  
             &lt;div className={style1.elem}&gt;
                 &lt;div class="row"  style={{padding:"20px"}}&gt;
                   &lt;div class="col-sm-8"&gt;
                     &lt;p style={{textAlign:"left"}}&gt; Mens Singles&lt;/p&gt;
                     &lt;p style={{display:"block",textAlign:"left"}}&gt; 399 +GST 72&lt;/p&gt;
                   &lt;/div&gt;
                   &lt;div class="col-sm-4"&gt;&lt;p style={{float:"left"}}&gt;471/-&lt;/p&gt;
                     &lt;a href="#" style={{backgroundColor:"#ffc800",padding:"10px", borderRadius:"0.5vw",color:"#707070",textDecoration:"none"}}&gt;Register&lt;/a&gt;
                   &lt;/div&gt;
  
                 &lt;/div&gt;
             &lt;/div&gt;
             &lt;div style={{borderBottomStyle:"solid",borderWidth: "thin"}}&gt;&lt;/div&gt;
  
             &lt;div className={style1.elem}&gt;
                 &lt;div class="row"  style={{padding:"20px"}}&gt;
                   &lt;div class="col-sm-8"&gt;
                     &lt;p style={{textAlign:"left"}}&gt; Mens Singles&lt;/p&gt;
                     &lt;p style={{display:"block",textAlign:"left"}}&gt; 399 +GST 72&lt;/p&gt;
                   &lt;/div&gt;
                   &lt;div class="col-sm-4"&gt;&lt;p style={{float:"left"}}&gt;471/-&lt;/p&gt;
                     &lt;a href="#" style={{backgroundColor:"#ffc800",padding:"10px", borderRadius:"0.5vw",color:"#707070",textDecoration:"none"}}&gt;Register&lt;/a&gt;
                   &lt;/div&gt;
  
                 &lt;/div&gt;
             &lt;/div&gt;
             &lt;div style={{borderBottomStyle:"solid",borderWidth: "thin"}}&gt;&lt;/div&gt;
  
             &lt;div className={style1.elem}&gt;
                 &lt;div class="row"  style={{padding:"20px"}}&gt;
                   &lt;div class="col-sm-8"&gt;
                     &lt;p style={{textAlign:"left"}}&gt; Mens Singles&lt;/p&gt;
                     &lt;p style={{display:"block",textAlign:"left"}}&gt; 399 +GST 72&lt;/p&gt;
                   &lt;/div&gt;
                   &lt;div class="col-sm-4"&gt;&lt;p style={{float:"left"}}&gt;471/-&lt;/p&gt;
                     &lt;a href="#" style={{backgroundColor:"#ffc800",padding:"10px", borderRadius:"0.5vw",color:"#707070",textDecoration:"none"}}&gt;Register&lt;/a&gt;
                   &lt;/div&gt;
                 &lt;/div&gt;
             &lt;/div&gt;
  
             &lt;/div&gt;
           &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;div class="row"&gt;
            &lt;div class="col"&gt;
              &lt;p style={{fontSize:"18px",float:"left",fontWeight:"500"}}&gt;Detail&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div  style={{borderStyle:"dotted",borderWidth: ".5px"}}&gt;
            &lt;div style={{textAlign:"justify"}} dangerouslySetInnerHTML={{__html: this.state.tournament_detail.detail}} /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  
  }
  </code></pre>