javascript, Array.prototype.map(). index is undefined

Question

I don't know the reason of the error:

 ｛ (questionList.length > 0) && questionList.map((item,index)
          =>
          <View key={index} style={styles.oneMonthV}>
            <Text
                style={[styles.textTGray, styles.fontTSize, TEXT_STYLE, styles.fontTQuestion]}>{item.content}</Text>
            <View style={styles.VTags}>
              {item.optionsList.map((item1, index1) =>
                  <TouchableOpacity key={index1}
                                    onPress={this._onPressButton.bind(this, index1)}>
                    <View>
                      { (item1.selected) ? (<TagCell modeColor='red'
                                                     content={item1.content}></TagCell>) : (
                          <TagCell
                              content={item1.content}></TagCell>) }
                    </View>
                  </TouchableOpacity>
              ) }
            </View>
          </View>
          )｝

The error show at

<View key={index} style={styles.oneMonthV}> . Why index is undefined.

I type the code below in the chrome console is correct.

['xxx','xx','xxx','www'].map((item,index) => {        console.log(`index==${index}`);  console.log(`item==${item}`);
    return (
        item + 'hahaha' )});

result:

> index==0  
  item==xxx  
  index==1  
  item==xx  
  index==2  
  item==xxx  
  index==3  
  item==www  
(4) ["xxxhahaha", "xxhahaha", "xxxhahaha", "wwwhahaha"]

I think my code is correct. Who knows the reason of this error?

---

As this error is too difficult. I add more code of this question.

render() {
    const {questionList} = this.props;
    return (
        <ScrollView style={styles.container}>
          ｛ (questionList.length > 0) && questionList.map((item,index) => (
          <View key={index} style={styles.oneMonthV}>
            <Text
                style={[styles.textTGray, styles.fontTSize, TEXT_STYLE, styles.fontTQuestion]}>{item.content}</Text>
            <View style={styles.VTags}>
              {item.optionsList.map((item1, index1) => (
                      <TouchableOpacity key={index1}
                                        onPress={this._onPressButton.bind(this, index1)}>
                        <View>
                          { (item1.selected) ? (<TagCell modeColor='red'
                                                         content={item1.content}></TagCell>) : (
                              <TagCell
                                  content={item1.content}></TagCell>) }
                        </View>
                      </TouchableOpacity>
                  )
              ) }
            </View>
          </View>
          )
          )｝
        </ScrollView>
    );
  }

Answer 1

There are few things going wrong, whenever you make use of arrow function, you should start with the body of the function on the same line. Also its a good practise to wrap it in (), also your check is unnecessary since if no element is present it wont map, however you must check for undefined. Also change ｛｝ to {}.

{questionList && questionList.map((item,index) => (
      <View key={index} style={styles.oneMonthV}>
        <Text
            style={[styles.textTGray, styles.fontTSize, TEXT_STYLE, styles.fontTQuestion]}>{item.content}</Text>
        <View style={styles.VTags}>
          {item.optionsList.map((item1, index1) => (
              <TouchableOpacity key={index1}
                                onPress={this._onPressButton.bind(this, index1)}>
                <View>
                  { (item1.selected) ? (<TagCell modeColor='red'
                                                 content={item1.content}></TagCell>) : (
                      <TagCell
                          content={item1.content}></TagCell>) }
                </View>
              </TouchableOpacity>
              )
          ) }
        </View>
      </View>
    )
  )}