.map（）renderRow（）中的JSX数组

Question

I am having trouble using taking an array of strings and 'converting' that into JSX using the map() function so that the JSX can make one line or row in a ListView.

  renderRow: function(rowData) { //rowData is an Array
    return rowData.map((data) => {
      // now data is a single element of my array
      return <View><Text> <Emoji size={40} name={data} /></Text></View>
      // also tried ( ) around the above for the return
    });
  },
  render: function() {
    return (
        <ListView contentContainerStyle={styles.list}
          enableEmptySections={true}
          initialListSize={500}
          pageSize={20}
          dataSource={this.state.dataSource}
          renderRow={(rowData) => this.renderRow(rowData)}
        />
    )
  }

The error I get with this is as follows:

StaticRenderer.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

Therefore I know it's something to do with what's going on in the map, and for some reason the JSX isn't being constructed properly inside the renderRow() function. Returning some basic JSX without the map works ok.. but I need to be able to do it for all elements of my array.

Is map() even the best way to do this? Any help would be greatly appreciated.

Answer 1

React doesn't know how to deal with lists of elements. Every component render method, as well as callbacks like renderRow , typically need to return a single element.

You need to wrap the items in a View , or other container element:

renderRow: function(rowData) { //rowData is an Array
  return (
    <View>
      {rowData.map((data) => {
        return <View><Text> <Emoji size={40} name={data} /></Text></View>
      })}
    </View>
  )
}