JSX expressions must have one parent element.ts(2657) react native

user_12339109 0
Viewed 6081

I am new to react native and have tried everything and keep getting the following error

JSX expressions must have one parent element.ts(2657)

I am trying to display information from json in a flatlist.

Here is my code.

render() {
  if (this.state.isLoading) {
    return (
      <View style={{flex: 1, paddingTop: 20}}>
        <ActivityIndicator />
      </View>
    );
  }
  return (
    <View>
      <View style={{backgroundColor: '#808080'}}>
       
            <Text style={styles.MainText}>Sermons</Text>
       
       </View>
      <FlatList style={{paddingTop: 30}}
        data={ DATA }
        ItemSeparatorComponent = {this.FlatListItemSeparator}
        renderItem={this._renderItem} />   
    </View>
  );
}
_renderItem = ({item}) => {

  return(
    <View style={{flex:1, flexDirection: 'row', paddingLeft: 10}}>
       <Image source={require('./church.png')} style={{width: '100%', height: '25%'}} />
        </View>
        <View style={{flex: 1, paddingLeft: 20}}>
          <Text>{item.title}</Text>
      </View>

  );
}
}

line 33 ); seems to be causing the problem but I don't know why.

react-native reactjs javascript
3 Answers

You can't render adjacent elements. They must have some parent element or React.Fragment: 

     return(
        <>
          <View style={{flex:1, flexDirection: 'row', paddingLeft: 10}}>
             <Image source={require('./church.png')} style={{width: '100%', height: '25%'}} />
          </View>
          <View style={{flex: 1, paddingLeft: 20}}>
            <Text>{item.title}</Text>
         </View>
       </>
  );

<></> is short for <React.Fragment></React.Fragment>

user_10591010

You have 2 view components in return. You should have 1 parent component so you can wrap them into a react fragment.

  return(
   <>
     <View style={{flex:1, flexDirection: 'row', paddingLeft: 10}}>
       <Image source={require('./church.png')} style={{width: '100%', height: '25%'}} />
     </View>
     <View style={{flex: 1, paddingLeft: 20}}>
          <Text>{item.title}</Text>
     </View>
   </>

  );
user_62576900

You need to add a container View:

_renderItem = ({item}) => {

  return(
<View>
    <View style={{flex:1, flexDirection: 'row', paddingLeft: 10}}>
       <Image source={require('./church.png')} style={{width: '100%', height: '25%'}} />
        </View>
        <View style={{flex: 1, paddingLeft: 20}}>
          <Text>{item.title}</Text>
      </View>
 </View>

  );
}
user_90794110
Related