How to fix JSX expression must have one parent element?

Question

I am trying to toggle a Modal in react native. Each item in a flatlist should have a toggle option to open a modal.

I get the error: JSX expressions must have one parent element.

I have tried to google for the right syntax but can't find a solution.

class CategoriesScreen extends Component {

  state = {
    modalVisible: false,
  };

  setModalVisible(visible) {
    this.setState({ modalVisible: visible });
  }

  render() {
function Item({ title }) {
      return (
        <TouchableOpacity style={styles.item} onPress={() => {
          this.setModalVisible(true);
        }}>
          <View>
            <Text style={styles.title}>{title}</Text>
          </View>
        </TouchableOpacity> 
        <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            Alert.alert('Modal has been closed.');
          }}>
          <View style={{ marginTop: 22 }}>
            <View>
              <Text>Hello World!</Text>

              <TouchableOpacity
                onPress={() => {
                  this.setModalVisible(!this.state.modalVisible);
                }}>
                <Text>Hide Modal</Text>
              </TouchableOpacity>
            </View>
          </View>
        </Modal>
    };
    return (
      <SafeAreaView style={styles.container}>
        <Text style={styles.heading}>Select a category for daily tasks.</Text>
        <Text style={styles.subheading}>{`You will receive a daily task in this category.\nLet’s get consistent!`}</Text>
        <FlatList
          data={DATA}
          renderItem={({ item }) => <Item title={item.title} />}
          keyExtractor={item => item.id}
          numColumns={2}
        />
      </SafeAreaView>
    );
  }
}

I am trying to get open one unique modal for each item in the flatlist.

Answer 1

You can only return a single entity. To fix this just surround your return in your Item function with a <Fragment/> element (from the react package).

Fragments let you group a list of children without adding extra nodes to the DOM.

This can be done like so:

import React, {Fragment} from 'react';
... 
function Item({ title }) {
    return (
      <Fragment>
        <TouchableOpacity style={styles.item} onPress={() => {
          this.setModalVisible(true);
        }}>
          <View>
            <Text style={styles.title}>{title}</Text>
          </View>
        </TouchableOpacity> 
        <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            Alert.alert('Modal has been closed.');
          }}>
          <View style={{ marginTop: 22 }}>
            <View>
              <Text>Hello World!</Text>

              <TouchableOpacity
                onPress={() => {
                  this.setModalVisible(!this.state.modalVisible);
                }}>
                <Text>Hide Modal</Text>
              </TouchableOpacity>
            </View>
          </View>
        </Modal>
      </Fragment>
   )
};

Hope this helps,