I am trying to create an exercise app that generates a new view. Within that view, users will be able to input weight and sets. In my code I have a modal that generates a list of exercises from a different file. I would then like to select an exercise which should populate a new view in the return with properties of the selected exercise.
Here is the code I have so far
import React, { useState } from 'react';
import { View, ScrollView, Modal, Picker, Text, TouchableOpacity, TextInput, StyleSheet, Button, FlatList } from 'react-native';
import myExerciseList from './ExerciseList';
//import Exercise from './ExerciseSets';
const exercises = myExerciseList
const ExerciseList = () => {
const [views, setViews] = useState([]);
const [visible, setVisible] = useState(false);
const handlePress = () => {
const newView = <View style={styles.ExerciseBox} key={views.length} >
<Text>Exercise</Text>
</View>;
setViews([...views, newView]);
setVisible(false);
};
return (
<View>
{/* Render the views */}
{views}
{/* Add a new view */}
<TouchableOpacity onPress={() => setVisible(true)}>
<Text>Select an Exercise</Text>
</TouchableOpacity>
<Modal visible={visible}>
<ScrollView>
{exercises.map((item) => (
<TouchableOpacity key={item.id} onPress={() => handlePress(item)}>
<Text>{item.name}</Text>
</TouchableOpacity>
))}
<TouchableOpacity onPress={() => setVisible(false)}>
<Text>Cancel</Text>
</TouchableOpacity>
</ScrollView>
</Modal>
</View>
);
}
const styles = StyleSheet.create({
ExerciseBox: {
flexDirection: 'column',
borderWidth: 2,
borderRadius: 5
},
})
export default ExerciseList;
I have tried creating another hook which then transfers the properties of the selected exercise to the handlePress function but I get the error
NewExercise.js:14 Uncaught ReferenceError: item is not defined
at handlePress
Am I missing something or is my approach completely wrong?
