Array rendering in React Native (undefined is not an object)

Question

I am rendering a array of data. It works fine with map function but if I try to call item wise it gives an error. Undefined is not an object (evaluating 'data[0].uri')

This doesn't work

render () {
    const data  = this.state.data;
    const selectedIndex = this.state.selectedIndex;
    return (
      <View style={styles.text}>

            <Card
              title="Profiling Question "
              image={{ uri: data[0].uri }}
            >
              <Text style={{ marginBottom: 10 }}>
                {data[0].text}
              </Text>
              <Button
                onPress={this.updateIndex}
              />
            </Card>

      </View>
    );
  }

but this works fine:

return (
      <View style={styles.text}>
      {data.map((item) => {
        return (
            <Card
              title="Profiling Question "
              image={{ uri: item.question_image }}
            >
              <Text style={{ marginBottom: 10 }}>
                {item.question_text}
              </Text>
              <Button
                onPress={this.updateIndex}
              />
            </Card>
          )})}
      </View>
    );

I wish to render only ONE item at a time on screen. Once user clicks button then second item renders.

what is the initial value of data[0] ? are you making any api call to update it? — Mayank Shukla
– Mayank Shukla, Commented Apr 24, 2019 at 13:47
Yes i am ... during map it is updating correctly. In both cases, Api is made before render with componentWillmount — Himanshu Sharma
– Himanshu Sharma, Commented Apr 24, 2019 at 13:56
but that will be a async call, means rendering might happening before the success of that, so either hold the rendering of card until you didnt get the data or put the default value in the array. With map it is working because, map body will be executed only after you get the data, not before that, that why. — Mayank Shukla
– Mayank Shukla, Commented Apr 24, 2019 at 13:58

Ankit Dubey · Accepted Answer · 2019-04-24 13:53:59Z

2

check for the empty value of data. if value is null or not set then display nothing otherwise display data.

render () {
    const data  = this.state.data;
    const selectedIndex = this.state.selectedIndex;
    return (
      <View style={styles.text}>

            <Card
              title="Profiling Question "
              image={{ uri: data[0] ? data[0].uri: null }}
            >
              <Text style={{ marginBottom: 10 }}>
                {data[0] ? data[0].text: ''}
              </Text>
              <Button
                onPress={this.updateIndex}
              />
            </Card>

      </View>
    );
  }

answered Apr 24, 2019 at 13:53

Ankit Dubey

2413 silver badges11 bronze badges

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

Comments

basbase · Accepted Answer · 2019-04-24 13:58:30Z

You can account for data being empty by using conditional rendering to make sure it is only rendered after data is filled

render() {
    const data          = this.state.data;
    const selectedIndex = this.state.selectedIndex;
    return (
        <View style={styles.text}>
            {data && data[selectedIndex] &&
            <Card
                title="Profiling Question "
                image={{uri: data[selectedIndex].question_image}}
            >
                <Text style={{marginBottom: 10}}>
                    {data[selectedIndex].question_text}
                </Text>
                <Button
                    onPress={this.updateIndex}
                />
            </Card>
            }
        </View>
    );
}

Collectives™ on Stack Overflow

Array rendering in React Native (undefined is not an object)

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related