Reading array from render function by state management in react native

Question

I am trying to render array of data in form of card. However only one item will be render as single card at a time. Once user update card number, next item will be rendered. I am not able to call array item wise in render function.

map function for list doesn't work for me as it will populate whole array but I want user to input before next item.

This data is saved from API call

data = [
  { id: 1, text: 'Card #1', uri: 'https://images.unsplash.com/photo-1535591273668-578e31182c4f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f28261f0564880c9086a57ee87a68887&auto=format&fit=crop&w=500&q=60' },
  { id: 2, text: 'Card #2', uri: 'https://images.unsplash.com/photo-1535576434247-e0f50b766399?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=232f6dbab45b3f3a6f97e638c27fded2&auto=format&fit=crop&w=500&q=60' },
  { id: 3, text: 'Card #3', uri: 'https://images.unsplash.com/photo-1535565454739-863432ea3c0e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=7edfb9bc7d214dbf2c920723cb0ffce2&auto=format&fit=crop&w=500&q=60' },
];

This is array of Data. Now from render function:

renderCard() {
    const buttons = ['Call', 'Fold', 'Raise']
    const selectedIndex = this.state.selectedIndex
    return (
      <Card
        title="Profiling Question "
        image={{ uri: this.state.data[selectedIndex].uri }}
      >
        <Text style={{ marginBottom: 10 }}>
          {this.state.data[selectedIndex].text}
        </Text>
        <Button
          onPress={this.updateIndex}
        />
      </Card>
    );
  }

UpdateIndex function updates index value. This is working fine.

I expect single card to be rendered with button to update to next card.

However I am getting this error:

TypeError: undefined is not an object(evaluting'this.state.data[selectedIndex].uri')

EDIT:

I have tried removing index too to check as below:

return (
      <Card
        title={"Question No: "+ this.state.selectedIndex +1 }
        image={{ uri: this.state.data[0].question_image }}
      >
        <Text style={{ marginBottom: 10 }}>
          {this.state.data[0].question_text}
        </Text>
        <Button
          onPress={this.updateLn}>
          <Text> Update Question </Text>
        </Button>
      </Card>
    );

Still same error.

My state is as:

export default class QuizScreen extends Component {
  constructor(props) {
    super(props)
    this.state = {
      data: [],
      selectedIndex: 0,
      dataLength: 0,
      cardIndex: 0,
    };
    this.updateIndex = this.updateIndex.bind(this)
    this.updateLn = this.updateLn.bind(this)
  }```

You set array data in const and you trying to getting from state. recheck your code once — Tarun konda
– Tarun konda, Commented Apr 24, 2019 at 12:05

Vencovsky · Accepted Answer · 2019-04-24 12:04:19Z

0

I see a big mistake here

First you say that the selected index is the state

const selectedIndex = this.state

But after you get data from the state

image={{ uri: this.state.data[selectedIndex].uri }}

So selectedIndex isn't an array index, it will be some object like

{
    ...anyThing
    data = [...]
}

You can't use an object as a key to you array. This is why you are getting the error.

For us to help you in what you need, Please show us the rest of the code so we can understand better what is in your this.state.

answered Apr 24, 2019 at 12:04

Vencovsky

32.1k25 gold badges132 silver badges202 bronze badges

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

1 Comment

Himanshu Sharma Over a year ago

Sorry Typo in copying. Edited code in question again.

Tarun konda · Accepted Answer · 2019-04-24 12:15:07Z

0

const data= [
  { id: 1, text: 'Card #1', uri: 'https://images.unsplash.com/photo-1535591273668-578e31182c4f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f28261f0564880c9086a57ee87a68887&auto=format&fit=crop&w=500&q=60' },
  { id: 2, text: 'Card #2', uri: 'https://images.unsplash.com/photo-1535576434247-e0f50b766399?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=232f6dbab45b3f3a6f97e638c27fded2&auto=format&fit=crop&w=500&q=60' },
  { id: 3, text: 'Card #3', uri: 'https://images.unsplash.com/photo-1535565454739-863432ea3c0e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=7edfb9bc7d214dbf2c920723cb0ffce2&auto=format&fit=crop&w=500&q=60' },
];

renderCard() {
    const buttons = ['Call', 'Fold', 'Raise']
    const selectedIndex = this.state
    return (
      <Card
        title="Profiling Question "
        image={{ uri: this.data[selectedIndex].uri }}
      >
        <Text style={{ marginBottom: 10 }}>
          {this.data[selectedIndex].text}
        </Text>
        <Button
          onPress={this.updateIndex}
        />
      </Card>
    );
  }

you set data into const data array but retrieving from state data 
output undefined
replace with this.state.data[0].uri to this.data[0].uri

edited Apr 24, 2019 at 12:15

answered Apr 24, 2019 at 12:10

Tarun konda

1,8901 gold badge14 silver badges19 bronze badges

3 Comments

Himanshu Sharma Over a year ago

This was just to state data structure. Actual data is being called from API in json format.

Tarun konda Over a year ago

replace with this.state.data[0].uri to this.data[0].uri

Himanshu Sharma Over a year ago

Not working as data is defined in const. I have updated question.

Collectives™ on Stack Overflow

Reading array from render function by state management in react native

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related