Why react native map function is not working properly?

Question

I am trying to retrieve data from firebase firestore. Data from the firestore is logging on the console but not displaying when I use component.

renderList = () => {
        const { accounts } = this.props
        accounts && accounts.map((account) => {
            return (
                <View>
                    <Text>{account.accountName}</Text>
                    {console.log(account.accountName)}
                </View>
            )
        })
    }

    render() {
        return (
            <>
                {this.renderList()}
            </>
        )
    }

In the above coding console.log(account.accountName) is working but it is not printing in the render method. I need to create a list with that data.

Answer 1

Try this please :

    renderList = () => {
            const { accounts } = this.props;
     if(accounts){
            return accounts.map((account) => {
                return (
                    <View>
                        <Text>{account.accountName}</Text>
                        {console.log(account.accountName)}
                    </View>
                )
            })
}
        }

        render() {
            return (
                <>
                    {this.renderList()}
                </>
            )
        }

hope it helps

Answer 2

I had the same problem too and this worked for me. Just after the arrow ( => ) use a bracket instead of curly brace like this ( => (... your code ...) not this => {....}

Here is your EDITED code

renderList = () => {
        const { accounts } = this.props
        accounts && accounts.map((account) => ( // don't use curly brace! use bracket "("
            return (
                <View>
                    <Text>{account.accountName}</Text>
                    {console.log(account.accountName)}
                </View>
            )
        )) // and here also; not curly brace; but a bracket ")"
    }

    render() {
        return (
            <>
                {this.renderList()}
            </>
        )
    }