undefined on getting specific value from State array - React Native

Question

I'm reading data from firestore and stores it in state array of objects.

when i

console.log(this.state.array)

it returns the whole array with all the data of the objects, but when i

console.log(this.state.array.name)

or

console.log(this.state.array[0])

it returns undefined

.

I have tried to get the data with

forEach

loop but it seems to be not working as well.

    constructor(props) {
        super(props);
        this.state = { tips: [] };
    }

    componentDidMount() {
        firebase.firestore().collection('pendingtips').get()
            .then(doc => { 
                doc.forEach(tip => { 
                    this.setState([...tips], tip.data()); 
                    console.log(this.state.tips);
                }); 
            })
            .catch(() => Alert.alert('error'));
    }

    renderTips() {
        console.log(this.state.tips); //returns the whole array as expected
        console.log(this.state.tips[0].name); //returns undefined
        return this.state.tips.map(tip => <PendingTip key={tip.tip} name={tip.name} tip={tip.tip} />); //return null because tip is undefined
    } 
   render() {
        return (
            <View style={styles.containerStyle}>
                <ScrollView style={styles.tipsContainerStyle}>
                    {this.renderTips()}
                </ScrollView>
            </View>
        );
    }

the array structure is:

"tips": [
    { name: "X", tip: "Y" },
    { name: "Z", tip: "T" }
]

so I expect this.state.tips[0].name will be "X" instead of undefined.

thanks in advance.

Can you share print screen of this array in beakpoint?

Iiskaandar
– Iiskaandar

2019-07-27 12:51:56 +00:00
Commented Jul 27, 2019 at 12:51 — Iiskaandar
– Iiskaandar, Commented Jul 27, 2019 at 12:51

cusX · Accepted Answer · 2019-07-27 13:03:21Z

1

First of all you should fetch data in componentDidMount instead of componentWillMount.

https://reactjs.org/docs/faq-ajax.html#where-in-the-component-lifecycle-should-i-make-an-ajax-call

Secondly, you should use this.setState to update your state, instead of mutating it directly.

  componentDidMount() {
    firebase
      .firestore()
      .collection("pendingtips")
      .get()
      .then(docs => {
        const tips = docs.map(doc => doc.data());

        this.setState({ tips });
      })
      .catch(() => Alert.alert("error"));
  }

answered Jul 27, 2019 at 13:03

cusX

5102 gold badges7 silver badges17 bronze badges

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

2 Comments

cusX Over a year ago

can you show us your render method? not renderTips

Adar Wallerstein Over a year ago

Changed it to ComponentDidMount but the main problem is with the state array, the this.state.array.push(object) actually worked for me. the problem was that I couldn't fetch the data from the state array properly

Adar Wallerstein · Accepted Answer · 2019-07-28 19:34:57Z

1

I Found out that the problem was that JavaScript saves arrays as objects. for example this array:

[ 'a' , 'b' , 'c' ]

is equal to:

{
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
}

"You get undefined when you try to access the array value at index 0, but it’s not that the value undefined is stored at index 0, it’s that the default behavior in JavaScript is to return undefined if you try to access the value of an object for a key that does not exist." as written in this article

answered Jul 28, 2019 at 19:34

Adar Wallerstein

1292 silver badges12 bronze badges

Comments

ravibagul91 · Accepted Answer · 2019-07-27 13:50:55Z

0

firesore requests are async, so by time your request gets execute your component is getting mounted and in a result you are getting undefined for your state in console.

You must do API call in componentDidMount instead of componentWillMount.

Mutating/changing state like this, will not trigger re-render of component and your component will not get latest data,

doc.forEach(tip => { 
      this.state.tips.push(tip.data()); 
      console.log(this.state.tips);
});

You must use setState to change your state, doing this your component will get re-render and you have latest data all the time.

componentDidMount(){
  firebase.firestore().collection('pendingtips').get()
     .then(doc => { 
         const tipsData = doc.map(tip => tip.data());
         this.setState({tips:tipsData},() => console.log(this.state.tips));
     })
     .catch(() => Alert.alert('error'));
}

While calling renderTips function make sure your state array has data,

{this.state.tips.length > 0 && this.renderTips()}

edited Jul 27, 2019 at 13:50

answered Jul 27, 2019 at 12:59

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

8 Comments

Adar Wallerstein Over a year ago

doesn't work as well... passing me straight to .catch

Adar Wallerstein Over a year ago

Changed it to ComponentDidMount but the main problem is with the state array, the this.state.array.push(object) actually worked for me. the problem was that I couldn't fetch the data from the state array proparly

ravibagul91 Over a year ago

You can do this, {this.state.tips.length > 0 && this.renderTips()}

ravibagul91 Over a year ago

What console.log(this.state.tips) print's?

ravibagul91 Over a year ago

Also try to print doc in your API response.

|

Collectives™ on Stack Overflow

undefined on getting specific value from State array - React Native

3 Answers 3

2 Comments

Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related