TypeError: undefined is not a function (near '…this.state.profile.map…')

Question

I am getting error again and again. I don't know why I am getting this error.

The response I am getting is also an array, I tried with console.log. Below is the proof

Response From the axios Api:

{

"CCompany": "Testing Company", 
"CFName": "Rehan", 
"CLName": "ahmed", 
"CMName": "", 
"CTelHome": "1-232-2323232", 
"UID": "700002"

}

Below is the code:

import React, { Component } from 'react';

import { View, Text, Dimensions, BackHandler, ToastAndroid } from 'react-native';

import axios from 'axios';

import Card from './Card';

import CardSection from './CardSection';

import ProfileDetails from './ProfileDetails';

import AsyncStorage from '@react-native-community/async-storage';



// Create a component

class ProfileActivity extends Component {

    constructor() {
        super();

        this.state = {
            profile: [],
            setUID: '',
            isloading: true,
        };
    }

    state = {
        canBeClosed: false
    }


    componentWillUnmount() {
        BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
    }

    handleBackButton = () => {
        if (this.props.navigation.isFocused()) {
            if (this.state.canBeClosed)
                return this.state.canBeClosed = false;

            else {
                setTimeout(() => { this.state.canBeClosed = false }, 3000);
                ToastAndroid.show("Press Again To Exit !", ToastAndroid.LONG);

                return this.state.canBeClosed = true
            }
        }
    };

    async componentDidMount() {
       
        try {
            if (this.state.setUID == null && this.state.profile == null) {
                console.log('profile remove');

                const user = await AsyncStorage.getItem('responseJson');
                const parsed = JSON.parse(user);
                if (parsed !== null) {
                    this.setState({ setUID: parsed.UID });
                }
               
                axios.get('https:/new.didx.net/didxapi/UserInfo.php?UID=' + this.state.setUID)
                    .then(response => this.setState({ profile: response.data }));
            }
            else {
                this.setState({ setUID: "" });
                this.setState({ profile: "" });
                console.log('not remove');
                const user = await AsyncStorage.getItem('responseJson');
                const parsed = JSON.parse(user);
                if (parsed !== null) {
                    this.setState({ setUID: parsed.UID });
                }
               
                axios.get('https:/new.didx.net/didxapi/UserInfo.php?UID=' + this.state.setUID)
                    .then(response => this.setState({ profile: response.data }));
            }
        }
        catch (error) {
            alert('Server Error!')
        }

        BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
       

    }

    renderProfile() {
        if (this.state.profile) {
            console.log(this.state.profile);
            return this.state.profile.map(profile => (
                <ProfileDetails  key={profile.UID} profile={profile} />
             ));
        }
    }


    render() {
        return (

            <View style={styles.container}>
                {this.renderProfile()}

            </View>
        );
    }
}

export default ProfileActivity;

const h = Dimensions.get('screen').height * 0.01;
const w = Dimensions.get('screen').width * 0.01;


const styles = {
    container: {
        flex: 1,
        backgroundColor: '#fff'
    },
    ViewStyle: {
        paddingTop: h * 5,

    },
    TextStyle: {
        justifyContent: 'flex-start',
        // alignSelf: 'center',
        color: '#000',
        fontWeight: 'bold',
        fontSize: 20,
        padding: 5,
        fontFamily: 'Roboto',
        maxWidth: w * 50,

    }
}

I tried everything I could to solve this problem.

Answer 1

.map expects an array... but your axios.get('https:/new.didx.net/didxapi/UserInfo.php?UID=' + this.state.setUID) call returns an object like { UID: "1", CFName: "1", CMName: "", CLName: "1", CCompany: "1", CTelHome: "2" }