CODEWITHSUNDEEP
javascriptarraysreactjsreact-nativedynamic-arrays
SpicyClubSauce
SpicyClubSauce

Reputation: 4256

React Native Trouble looping thru array and displaying with image url in state

React newbie here. I've got some React Code where I'm trying to loop through an array I provided in my .state and display the image. (using 'Image' and using a Card object from https://github.com/lhandel/react-native-card-stack-swiper to display the Image inside the Card object, which itself is nested inside the Object, but that's neither here nor there.)

export default class App extends Component<{}> {
  constructor(props) {
    super(props);
    this.state = {
      cards: [
        {itemname: 'Item 1',
          restoname: 'Resto 1',
          url: 'https://res.cloudinary.com/grubhub/image/upload/v1515191165/bkf4niv9okipbc8y6o8h.jpg',
          description: 'Desc 1'},
        {itemname: 'Item 2',
          restoname: 'Resto 2',
          url: 'https://res.cloudinary.com/grubhub/image/upload/v1514060352/twhriy3hvbzayktrjp91.jpg',
          description: 'Desc 2'}
      ]
    };
  }

render() {
    const contents = this.state.cards.map((item, index) => {
      return (
          <Card>
            <Image
                key={index}
                source={{uri: {item.url}}} />
          </Card>
      )
    });

return (
      <View style={{flex:1}}>

        <CardStack
          cards = {this.state.cards}
        >

         <View>
            {contents}
         </View>
        </CardStack>

Is my syntax incorrect somewhere? Because it's errorring and telling me 'Unexpected token' on the {item.url}, but I feel like I'm looping through and calling the url key of the individual cards items in the array this way, no? Also, bonus points if anyone can point out the next error after that in the {contents} call below it that I'm sure to run into.

Much thanks in advance everyone,

-React dweeb with rattled confidence.

Upvotes: 1

Views: 996

Answers (1)

SpicyClubSauce
SpicyClubSauce

Reputation: 4256

Figured it out. At least the first part -- it's because item.url didn't need extra curly braces.

<Image
  key={index}
  style={[styles.image_card]}
  source={{uri: item.url}} />

Upvotes: 1

Related Questions