how to create an array of JSON objects , store them in a state array object and print the elements inside the render function in react-native

Question

I am making a call to firebase database and parsing through the JSON objects and storing them in an array locally. Then I am copying the array created to a state array object and later printing the values of the state array object inside the render() function.



class ABC extends Component
    {

    state = {
    objectArray:[
     {
       key1:'',
       key2:'',
       key3:'',
       key4:''
     }
    ]
    };


    componentDidMount() {
        var objectArray = [];
        var object = {
             key1:'',
             key2:'',
             key3:'',
             key4:''
            };

    // parsing through the firebase object and storing it in the object which is happening successfully

    objectArray.push(object);
//when I print the array it gives me the result: [object Object],[object Object] which means two objects are getting stored here.

    this.setState({objectArray: objectArray });

    }

    render()
    {

    this.state.objectArray.map(function(item){
    console.log("The items is "+item.key1); // No data getting printed here.
    console.log("The items is "+item.key2);
    console.log("The items is "+item.key3);
    console.log("The items is "+item.key4);
    });

    }

I am able to fetch the results from the firebase object array and parse through them and store them in the objectArray local object but not able to store them inside the state array object. What is getting wrong here?

Answer 1

Your render method should look like something as follows because you need to return some JSX.

render() {

  this.state.objectArray.map(function (item) {
    console.log("The items is " + item.key1); // No data getting printed here.
    console.log("The items is " + item.key2);
    console.log("The items is " + item.key3);
    console.log("The items is " + item.key4);
  });

  return this.state.objectArray.map(item => <p>{item.key1}</p>)

}

Note that all the values are empty strings so make sure that they're not.

Update:

From what I see in the file you provided, I guess you're setting the state before you actually receive the data. Try setting the state inside the callback:

componentDidMount() {

    const objectArray = [];
    const object = {
        key1: '',
        key2: '',
        key3: '',
        key4: ''
    };

    objectsRef.on('value', (snapshot) => {
        snapshot.forEach(function (childSnapshot) {
            objectsRef.child(childSnapshot.key).on('value', function (childData) {
                object.key1 = childData.val().key1;
                object.key2 = childData.val().key2;
                object.key3 = childData.val().key3;
                object.key4 = childData.val().key4;
                objectArray.push(object);
                this.setState({ objectArray: objectArray });
                console.log("objectArray array is " + objectArray.toString());
            })
        });

    });
}

It's better if you modify this such that the setState is only called once instead of for each iteration.

Answer 2

You could do this:

this.state.objectArray.map( (item)=> return {
    console.log("The items is "+item.key1); // No data getting printed here.
    console.log("The items is "+item.key2);
    console.log("The items is "+item.key3);
    console.log("The items is "+item.key4);

  })