CODEWITHSUNDEEP
react-nativejsx
dylan
dylan

Reputation: 95

Adjacent JSX in React Native - error

I have this in my React Native code, I am trying to parse through some API data. 

        {this.state.articles.map(article => (
     <Image
      style={{width: 50, height: 50}}
      source={{uri: article.urlToImage}}
    />

<Text style={styles.article}  onPress={() => Linking.openURL(article.url)} >{article.title}</Text>

and every time I run it I get a error that says:

Adjacent JSX elements must be wrapped in an enclosing tag

I have no idea what to do, can anyone help me out? Thanks!

Upvotes: 0

Views: 2016

Answers (1)

Thomas
Thomas

Reputation: 8003

The result of the .map call can only return one element at a time. Because the JSX-compiler sees two adjacent elements (Image and Text), it throws the mentioned error.

The solution would be to wrap the two components in a view

{this.state.articles.map(article => (
  <View style={{ some extra style might be needed here}}>
     <Image
      style={{width: 50, height: 50}}
      source={{uri: article.urlToImage}}
    />
    <Text style={styles.article}  onPress={() => Linking.openURL(article.url)} >{article.title}</Text>
  </View>
)}

Upvotes: 4

Related Questions