Adjacent JSX elements must be wrapped in an enclosing tag for Images?

Question

I looked up other answers such as using flex: 1 on View and I still get the same error. I think it has something to do with Image tags next to each other?

    render() {
    return (

      <Container>
        <Content
          bounces={false}
          style={{ flex: 1, backgroundColor: "#fff", top: -1 }}
        >

        <FlatList

          data={ this.state.dataSource}

          ItemSeparatorComponent = {this.FlatListItemSeparator}


          renderItem={({item}) =>
          <View style={{flex: 1}}>

          {this.state.username   ?
          <Image source={{uri:`http://www.example.com/img/${item.banner}`}} style={styles.drawerCover}/>
          <Image square style={styles.profileImage} source={{uri:`http://www.example.com/img/${item.profile}`}}/>
          <Text style={styles.nameText}>{item.first_name} {item.last_name}</Text>
          :

          <Image source={drawerCover} style={styles.drawerCover} />
          <Image square style={styles.drawerImage} source={drawerImage} />

          }
          </View>
        }
              keyExtractor={(item, index) => index}
         />



          <List
            dataArray={datas}
            renderRow={data =>
              <ListItem
                button
                noBorder
                onPress={() => this.props.navigation.navigate(data.route)}
              >
                <Left>
                  <Icon
                    active
                    name={data.icon}
                    style={{ color: "#777", fontSize: 26, width: 30 }}
                  />
                  <Text style={styles.text}>
                    {data.name}
                  </Text>
                </Left>
                {data.types &&
                  <Right style={{ flex: 1 }}>
                    <Badge
                      style={{
                        borderRadius: 3,
                        height: 25,
                        width: 72,
                        backgroundColor: data.bg
                      }}
                    >
                      <Text
                        style={styles.badgeText}
                      >{`${data.types} Types`}</Text>
                    </Badge>
                  </Right>}
              </ListItem>}
          />
        </Content>
      </Container>
    );
  }
}

This is the drawer navigation and I want it to look similar to a material design. And this is saying if the user is logged in then show that person's images. If not then the default images.

It has to do with *any* tags, as explained [here](https://stackoverflow.com/a/45434522/4522960). — Or B, Feb 18 '18 at 13:35
`{this.state.username ? []:[]}` - use array, you dont have to wrap it in another div when you already have the single parent `View` - just remember to add `key` prop. — Lukasz 'Severiaan' Grela, Feb 18 '18 at 20:51
If you are using React >= 16, make use of `React.Fragment` which is specifically built for this scenario and avoid adding extra `div` — Panther, Feb 18 '18 at 21:20

score 2 · Accepted Answer · answered Feb 18 '18 at 14:25

2

When using JSX you can only return a single element. In your solution there are multiple elements which are Image components . The way to solve this is to wrap all of them in a div.

answered Feb 18 '18 at 14:25

Rohith Rajasekharan

577
5
10

Thank you! @Rohith Rajasekharan – Laney Williams Feb 18 '18 at 14:45

score 1 · Answer 2 · answered Feb 18 '18 at 20:56

I would not introduce new element to wrap the images and artificially mute the error, you can return a list (Array) of components as there is single parent element where it is rendered, I have removed some code for brevity:

      /* CUT */
      renderItem={({item}) =>
      <View style={{flex: 1}}>

      {this.state.username   ?
      [
          <Image key='img-1' source={{uri:`http://www.example.com/img/${item.banner}`}} style={styles.drawerCover}/>,
          <Image key='img-2' square style={styles.profileImage} source={{uri:`http://www.example.com/img/${item.profile}`}}/>,
          <Text key='txt-1' style={styles.nameText}>{item.first_name} {item.last_name}</Text>
      ]
      :
      [
          <Image key='img-1' source={drawerCover} style={styles.drawerCover} />,
          <Image key='img-2' square style={styles.drawerImage} source={drawerImage} />
      ]
      }
      </View>
    }
          keyExtractor={(item, index) => index}
     />
      /* CUT */

Adjacent JSX elements must be wrapped in an enclosing tag for Images?

2 Answers2