title: React & Typescript: Cannot read property '0' of undefined
body: <p>I recently moved from .jsx to .tsx, and I'm having issues (before moving to typescript, was all working well). The first error is at line: "<code>&lt;Modal show={this.state.isOpen[key]} onClose={this.handleToggleModal.bind(__this,key)}&gt;</code>". I suspect there's something related to typescript, but I don't know what. Anybody can help me?</p>
  
  <pre><code>// TaskCard.tsx
  
  //Dependencies
  import * as React from 'react';
  
  //Copmponents
  import Modal, {ModalProps} from './Modal';
  import Input from './Input';
  import {IBoard} from './Board';
  import PostComment from './PostComment';
  
  export interface IComments{
      body: string,
      from: string,
      date: string,
      hour: string
  }
  
  export interface ITask{
      board: string,
      duedate: string,
      tag: string,
      tagClass: string,
      tagText: string,
      body: string,
      risk: string,
      responsable: string
      comments: IComments[]
  }
  
  export interface TaskProps{
      tasks: ITask[]
      boards: IBoard[]
  }
  
  export interface TaskState{
      isOpen: {}
  }
  
  class TaskCard extends React.Component&lt;TaskProps, TaskState&gt;{
      constructor(props) {
          super(props);
  
          this.state = { 
              isOpen: props.isOpen
          };
      }
  
      handleToggleModal(key) {
          this.state.isOpen[key] = !this.state.isOpen[key];
          this.setState(this.state.isOpen);
      }
  
      render(){
          const { tasks, boards } = this.props;
          let __this = this;
  
          return(
              tasks &amp;&amp; tasks.map(
                  (tasks, key) =&gt;
                  &lt;div key={key} className="v-margin no-margin-top card-contour medium" onClick={this.handleToggleModal.bind(__this,key)}&gt;
                      &lt;div className="row middle-xs caption"&gt;
                          &lt;div className="col-xs-6 no-padding"&gt;
                              &lt;div className="row middle-xs"&gt;
                                  &lt;img className="img_icn no-padding-left" src="./assets/img/icn_calendar.svg" alt=""/&gt;
                                  &lt;p className="txt-tertiary-color"&gt;{tasks.duedate}&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div className="col-xs-6 no-padding"&gt;
                              &lt;div className="row end-xs middle-xs"&gt;
                                  &lt;div className={tasks.tagClass + " tag tag_box center-align"}&gt;
                                      &lt;p&gt;{tasks.tag}&lt;/p&gt;
                                      &lt;span className="tag_hint"&gt;{tasks.tagText}&lt;/span&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div className="row middle-row v-padding"&gt;
                          &lt;p&gt;{tasks.body}&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div className="row middle-xs caption"&gt;
                          &lt;div className="col-xs-9 no-padding"&gt;
                              &lt;div className="row middle-xs"&gt;
                                  &lt;img className="img_icn no-padding-left" src="./assets/img/icn_target.svg" alt=""/&gt;
                                  &lt;p className="txt-tertiary-color"&gt;Riesgos: {tasks.risk}%&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div className="col-xs-3 no-padding"&gt;
                              &lt;div className="row middle-xs end-xs"&gt;
                                  &lt;img className="img_icn no-padding-left" src="./assets/img/icn_comments.svg" alt=""/&gt;
                                  &lt;p className="txt-tertiary-color"&gt;{tasks.comments.length}&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;Modal show={this.state.isOpen[key]} onClose={this.handleToggleModal.bind(__this,key)}&gt;
                          &lt;div className="modal_container"&gt;
                              &lt;section className="modal_section"&gt;
                                  &lt;div className="row middle-xs no-margin-left no-margin-right modal_section_title"&gt;
                                      &lt;object width="20px" height="20px" data="./assets/img/icn_objetive-blue.svg"&gt;&lt;/object&gt;
                                      &lt;div className="col-xs start-xs"&gt;
                                          &lt;h4 className="semi-bold"&gt;Objetivo&lt;/h4&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div className="col-xs-12 modal_section_content"&gt;
                                      &lt;p&gt;{tasks.body}&lt;/p&gt;
                                  &lt;/div&gt;
                              &lt;/section&gt;
                              &lt;section className="modal_section"&gt;
                                  &lt;div className="row middle-xs no-margin-left no-margin-right modal_section_title"&gt;
                                      &lt;object width="20px" height="20px" data="./assets/img/icn_target-blue.svg"&gt;&lt;/object&gt;
                                      &lt;div className="col-xs start-xs"&gt;
                                          &lt;h4 className="semi-bold"&gt;Target&lt;/h4&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div className="col-xs-12 modal_section_content"&gt;
                                      &lt;p&gt;Riesgos / Problemas = {tasks.risk}%&lt;/p&gt;
                                      &lt;div className="table v-margin"&gt;
                                          &lt;div className="row middle-xs"&gt;
                                              &lt;div className="col-xs"&gt;
                                                  &lt;p className="table_head"&gt;Fecha de vencimiento&lt;/p&gt;
                                                  &lt;p className="table_body"&gt;{tasks.duedate}&lt;/p&gt;
                                              &lt;/div&gt;
                                              &lt;div className="col-xs"&gt;
                                                  &lt;p className="table_head"&gt;Tipo de objetivo&lt;/p&gt;
                                                  &lt;p className="table_body"&gt;{tasks.tagText}&lt;/p&gt;
                                              &lt;/div&gt;
                                              &lt;div className="col-xs"&gt;
                                                  &lt;p className="table_head"&gt;Responsable&lt;/p&gt;
                                                  &lt;p className="table_body"&gt;{tasks.responsable}&lt;/p&gt;
                                              &lt;/div&gt;
                                              &lt;div className="col-xs-12 v-margin no-margin-bottom"&gt;
                                                  &lt;p className="table_head"&gt;Estado de objetivo&lt;/p&gt;
                                                  &lt;div className="row middle-xs"&gt;
                                                      {
                                                          boards &amp;&amp; boards.map(
                                                          (boards, board) =&gt;
                                                          &lt;div key={board} className="col-xs-3"&gt;
                                                              &lt;Input name="state" type="radio" classNameCustom="input_radio"
                                                              checked={boards.id == tasks.board} value={boards.id} id={boards.id}/&gt;
                                                              &lt;label htmlFor={boards.id}&gt;{boards.name}&lt;/label&gt;
                                                          &lt;/div&gt;
                                                          )
                                                      }
                                                  &lt;/div&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/section&gt;
                              &lt;section className="modal_section"&gt;
                                  &lt;div className="row middle-xs no-margin-left no-margin-right modal_section_title"&gt;
                                      &lt;object width="20px" height="20px" data="./assets/img/icn_activity-blue.svg"&gt;&lt;/object&gt;
                                      &lt;div className="col-xs start-xs"&gt;
                                          &lt;h4 className="semi-bold"&gt;Actividad&lt;/h4&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div className="col-xs-12 modal_section_content"&gt;
                                      {
                                          tasks.comments.length!=0 ?(
                                              tasks.comments.map((comments, i) =&gt; {
                                                  return(
                                                      &lt;div key={i} className="comment"&gt;
                                                          &lt;div className="comment_box"&gt;
                                                              &lt;p&gt;{comments.body}&lt;/p&gt;
                                                          &lt;/div&gt;
                                                          &lt;div className="comment_data row no-margin middle-xs"&gt;
                                                              &lt;div className="col-xs start-xs"&gt;
                                                                  &lt;p&gt;{comments.from}&lt;/p&gt;
                                                              &lt;/div&gt;
                                                              &lt;div className="col-xs end-xs"&gt;
                                                                  &lt;p&gt;{comments.date} a las {comments.hour} hs.&lt;/p&gt;
                                                              &lt;/div&gt;
                                                          &lt;/div&gt;
                                                      &lt;/div&gt;
                                                  )
                                              })
                                          ):null                                
                                      }
                                  &lt;/div&gt;
                              &lt;/section&gt;
                          &lt;/div&gt;
                          &lt;PostComment /&gt;
                      &lt;/Modal&gt;
                  &lt;/div&gt;
              )
          )
      }
  }
  
  export default TaskCard;
  </code></pre>
  
  <p>And here is the Modal component</p>
  
  <pre><code>//Modal.tsx file
  //Dependencies
  import * as React from 'react';
  
  export interface ModalProps{
      onClose: any,
      show: boolean,
      children: any
  }
  
  export default class Modal extends React.Component&lt;ModalProps&gt;{
      handleStopPropagation = (e) =&gt;{
          e.stopPropagation();
      }
  
      render(){
          const {onClose, show, children} = this.props;
  
          // Render nothing if the "show" prop is false
          if(!this.props.show) {
              return null;
          }
  
          return (
              &lt;div className="modal_bkg" onClick={this.handleStopPropagation}&gt;
                  &lt;div className="modal_bkg_container row middle-xs center-xs"&gt;
                      &lt;div className="modal card"&gt;
                          &lt;div className="right-align modal_close"&gt;
                              &lt;button className="btn btn_close" onClick={this.props.onClose}&gt;x&lt;/button&gt;
                          &lt;/div&gt;
                          {this.props.children}
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>