ReactJs: Unable to loop over array of object using map

Question

While trying to loop over an array of object retrieved from the database in ReactJs, I always get this error

this.state.getCourse.map is not a function. (In 'this.state.getCourse.map(function (y) {
(Device)
        _react.default.createElement(_reactNative.Text, null, y.fullname);
      })', 'this.state.getCourse.map' is undefined)

I don't know why I always get this error as if I simply use

<Text>{this.state.getCourse}</Text>

it will display the saved objects in an array objects format like this

[{"fullname": "Gbenga", "mail": "[email protected]"},{"fullname": "Femi", "mail": "[email protected]"}]

but if I looped through it, it always returned the above error.

This is what I have done so far.

// screens/Attendance.js

import React, { Component } from 'react';
import { Button, View, Text, TouchableOpacity, StyleSheet, Alert } from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';

class Attendace extends Component {

 constructor() {
    super();
    this.state = {
      getCourse: [],
    };
  }

  async componentDidMount(){
    try {
      await AsyncStorage.getItem('course').then(value =>
        //AsyncStorage returns a promise so adding a callback to get the value
        this.setState({ getCourse: value })
        //Setting the value in Text 
      );
      } catch (e) {
      alert(e);
    }
  }
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> 
        <Text>Attendance screen</Text>
         {
           this.state.getCourse.map((y) => {
             <Text>{y.fullname}</Text>
           })
         } // This will not work
        <Text>{this.state.getCourse}</Text>// This will display the array in a json format
      </View>
    );
  }
}

export default Attendace;

Check getCourse data type using typeof console.info(typeof this.state.getCourse ) — Ali Taee
– Ali Taee, Commented Oct 22, 2020 at 16:09
It's better to console on render() { console.info(typeof this.state.getCourse ) return ( — Ali Taee
– Ali Taee, Commented Oct 22, 2020 at 16:15
Looks like AsyncStorage.getItem returns a string in promise. Try this.setState({ getCourse: JSON.parse(value) }) — alex-bu-89
– alex-bu-89, Commented Oct 22, 2020 at 16:16
@alex-bu-89 It now return Objects aree not valid as a React Child(found: object with keys{fullname,mail,course}) — gbenga ogunbule
– gbenga ogunbule, Commented Oct 22, 2020 at 16:47

Dharman · Accepted Answer · 2020-10-22 17:47:11Z

3

You are returning an object from your map function. You need to add a return or simply use the short arrow syntax like so:

<Text>Attendance screen</Text>
         {
           this.state.getCourse.map((y) => <Text>{y.fullname</Text>)
         } // notice the lack of {}, if you dont like this syntax just add a return before <Text ;

Also after you fix this React will complain about missing keys so either add an index value (not usually recommended if the array can change) or use some unique value from your datasource.

edited Oct 22, 2020 at 17:47

Dharman♦

33.9k27 gold badges103 silver badges157 bronze badges

answered Oct 22, 2020 at 17:41

Kaca992

2,27513 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Guruparan Giritharan · Accepted Answer · 2020-10-22 17:33:54Z

1

You always save a string to async storage so do a JSON.parse

 await AsyncStorage.getItem('course').then(value =>
        //AsyncStorage returns a promise so adding a callback to get the value
        this.setState({ getCourse: JSON.parse(value) })
        //Setting the value in Text 
      );

According to your current code you try to call the map function on a string which is causing the error and you wont see the quotes when displaying that.

render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> 
        <Text>Attendance screen</Text>
         {
           this.state.getCourse.map((y) => {
            return (<Text>{y.fullname}</Text>)
           })
         } // This will not work
        <Text>{JSON.stringify(this.state.getCourse)}</Text>// This will display the array in a json format
      </View>
    );

}

edited Oct 22, 2020 at 17:33

answered Oct 22, 2020 at 16:16

Guruparan Giritharan

16.4k4 gold badges30 silver badges53 bronze badges

8 Comments

gbenga ogunbule Over a year ago

It now return Objects aree not valid as a React Child(found: object with keys{fullname,mail,course})

Guruparan Giritharan Over a year ago

its bcos of <Text>{this.state.getCourse}</Text> here you are trying to show an array inside text, so you have to use JSON.stringify(this.state.getCourse) here

gbenga ogunbule Over a year ago

Please, can I see an example

Guruparan Giritharan Over a year ago

@gbengaogunbule updated the answer, please try that

Guruparan Giritharan Over a year ago

Yes thats the other part, but the map should work now as you have the array

|

The code painter · Accepted Answer · 2020-10-22 17:22:37Z

0

AsyncStorage.getItem('course') is returning an object and you can't loop over that, but instead you can just directly access fullname,course,email and use them in ur UI .

async componentDidMount(){
    try {
      await AsyncStorage.getItem('course').then(value =>
          const course = JSON.parse(value)
          if(course ) this.setState({ getCourse: course } )
      );
      } catch (e) {
      alert(e);
    }
  }

  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> 
        <Text>{this.state.getCourse.fullname }</Text>
        <Text>{this.state.getCourse.mail}</Text>
        <Text>{this.state.getCourse.course}</Text>

      </View>
    );
  }

edited Oct 22, 2020 at 17:22

answered Oct 22, 2020 at 17:16

The code painter

1,7743 gold badges17 silver badges40 bronze badges

Collectives™ on Stack Overflow

ReactJs: Unable to loop over array of object using map

3 Answers 3

Comments

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related