JSX Elements and Use of Enclosing Tag in React Native

by

Today, we will talk about one of those easy to miss React rules if you are new to React applications.

If you place two elements next to each other without wrapping them with a parent element, React will complain about not being able to render due to the following error.

Adjacent JSX elements must be wrapped in an enclosing tag

In other words, in react or react native, it is not possible to render two or more sibling elements without enclosing them within a parent element.

Adjacent JSX elements must be wrapped in an enclosing tag
Adjacent JSX elements must be wrapped in an enclosing tag

For example, all codes you see below will raise the error message mentioned above, and this red error screen in android emulator.

// WRONG
render() {
   return (
    <View>
        <Text>My first view</Text>
    </View>
    <View>
       <Text>My second View</Text>
    </View>
    )
}    
//  WRONG
render() {
    return (
        <Text>My first view</Text>
        <Text>My second View</Text>
    )
}
//WRONG - rendering custom component
render() {
    return (
        <CustomComponent1 / >
        <CustomComponent2 / >
    )
}

This error occurs when render function tries to return multiple JSX elements not enclosed in a parent element. React converts a custom component declaration like <CustomComponent1 /> or built-in elements like “<View>” into a JS equivalent. This is done by using React.createElement and this function only works for one element.

React.createElement(
  type,
  [props],
  [...children]
)

Type argument defines one element, and this element can contain an infinite number of sibling elements.

Two Methods

The first solution must be obvious after the talk we had about why this error occurs. Both methods are simple and easy to implement. Anyway, let’s go through these two methods in more detail and get rid of this error message.

  1. Wrapping the components in a parent element
  2. Returning multiple elements as an array

Method 1 – Wrap It

This is a simple solution as you only need to add an enclosing parent element to all components inside the render function. Check out the code below for how we add a parent element for each case.

//CORRECT
 render() {
    return (
      <View>
        <View>
          <Text>My first view</Text>
        </View>
        <View>
          <Text>My second View</Text>
        </View>
      </View>
    );
  }

//CORRECT
render() {
    return (
      <View>
        <Text>My first view</Text>
        <Text>My second View</Text>
      </View>
    );
  }

//CORRECT - rendering a custom component
render() {
    return (
      <View>
        <CustomComponent1 />
        <CustomComponent2 />
      </View>
    );
  }

Method 2 – Return an Array

If you don’t want to add another wrap element, what you can do is to return multiple components as an array in render function. But keep in mind that this method only works for React v16 or later.

Let’s see how we write the above examples using the array method.

//CORRECT
 render() {
    return [
      <View key="view1">
        <Text>My first view</Text>
      </View>,
      <View key="view2">
        <Text>My second View</Text>
      </View>
    ];
  }

//CORRECT
render() {
    return [
      <Text key="text1">My first view</Text>,
      <Text key="text2">My second View</Text>
    ];
  }  
//CORRECT - rendering a custom component
render() {
    return [
      <CustomComponent1 key="Component1" />,
      <CustomComponent2 key="Component2" />
    ];
  }

As you may have already noticed , we have added a “key” property for each element. This helps ReactJS to iterate through the array components. If you don’t provide the “key” property, it will not raise an error but give you this warning, “Warning: Each child in an array or iterator should have a unique “key” prop“.