How to fix JSX expression must have one parent element? - reactjs

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,