React Native ListView Items not displaying

Question

I'm trying to use the React Native <ListView /> component with the <List /> and <ListItem /> component from React Native Elements but the <ListItem /> component isn't displaying. Not entirely sure why. Shouldn't my renderRow function be running for every object in my array and returning <Listitem /> ? My data is coming in fine.

Please let me know what I'm doing wrong. Thanks! Code is below

import React, { PropTypes, Component } from 'react'
import { View, Text, ListView, StyleSheet } from 'react-native'
import { connect } from 'react-redux'
import { List, ListItem } from 'react-native-elements'
import { getMakeData } from '~/redux/modules/data'

class Make extends Component {
    static propTypes = {
        dispatch: PropTypes.func.isRequired,
        makeData: PropTypes.array.isRequired
    }
    constructor (props) {
        super(props)
        this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2 })
        this.state = {
            dataSource: this.ds.cloneWithRows(this.props.makeData)
        }
    }
    componentDidMount () {
        this.props.dispatch(getMakeData())
    }
    renderRow = (item) => {
        return (
            <ListItem
                key={item.id}
                title={item.name}
            />
        )
    }
    render () {
        console.log(this.props.makeData)
        return (
            <List style={{flex: 1}}>
                <ListView 
                    renderRow={item => this.renderRow(item)}
                    dataSource={this.state.dataSource}
                />
            </List>
        )
    }
}

function mapStateToProps ({data}) {
    return {
        makeData: data.makeData
    }
}

export default connect(mapStateToProps)(Make)

const styles = StyleSheet.create({

})

Answer 1

It looks like your issue is you are not using renderRow correctly. Based on your description, makeData is an array of objects, so in your render function, you call ListView with that array, but renderRow should only render single row and should be passed in the data for each row. So, change your renderRow and render function like below

renderRow (item) {
    return (
        <ListItem
            key={item.id}
            title={item.name}
        />
    )
}
render () {
    return (
        <List style={{flex: 1}}>
            <ListView 
                renderRow={(item) => this.renderRow(item)}
                dataSource={this.props.makeData}
            />
        </List>
    )
}

What is happening now is that you are telling renderRow here is the object you should be using.

What you had before is you are trying to render ListItem using the array makeData , where you should be using a single object to render the row.

Answer 2

fix bug: renderRow={this.renderRowt} -> renderRow={this.renderRow.bind(this)}

refactor code

function mapStateToProps ({ data }) {
    return {
        makeData: data.makeData
    }
}

->

1-

function mapStateToProps ({ data:{makeData} }) {
        return {
            makeData,
        }
    }
    export default connect(mapStateToProps)(Make)

2-

const mapStateToProps = ({ data:{makeData} }) => makeData
export default connect(mapStateToProps)(Make)

3-

export default connect(({ data:{makeData} }) => makeData)(Make)