The program gives the error: “eferenceError: Property ‘list’ doesn’t exist, js engine: hermes”. I believe this is due to incorrectly passing addItem or using useState. Tell me, how can I fix the code so that everything works?
App.js:
export default function App() {
const [listOfItems, setListOfItems] = useState([
{text:"TEST", fav: true, key: Math.random().toString(36).substring(7)},
{text:"TEST2n1n2n3", fav: false, key: Math.random().toString(36).substring(7)}
]); // {text:"", fav:t|f, key: Math.random().toString(36).substring(7)}
const addItem = (data) => {
setListOfItems((list) => [
// { text: data.text, fav: data.fav, key: Math.random().toString(36).substring(7) },
{ text: data.text, fav: data.fav, key: Math.random().toString(36).substring(7) },
...list,
]);
};
const deleteItem = (key) => {
setListOfItems((list) => list.filter(item => item.key !== key));
};
const changeItem = (key, data) => {
setListOfItems((list) => {
const itemIndex = list.findIndex(item => item.key === key);
if (itemIndex !== -1) {
const updatedList = [...list];
updatedList[itemIndex] = { ...updatedList[itemIndex], ...data };
return updatedList;
}
return list;
});
};
const Tab = createBottomTabNavigator();
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Favorites" component={Favorites} initialParams={{listOfItems}} />
<Tab.Screen name="Home" component={MainList} initialParams={{listOfItems}}/>
<Tab.Screen name="Create" component={Form} initialParams={{addItem}}/>
<Tab.Screen name="Settings" component={Settings} />
</Tab.Navigator>
</NavigationContainer>
);
};
FormCreate.js:
export default function Form({ route }) {
const [data, setValue] = useState({ text: "", fav: false });
const { addItem } = route.params;
const onChangeText = (item) => {
setValue(prevState => ({ ...prevState, text: item }));
};
const onChangeFavorite = () => {
setValue(prevState => ({ ...prevState, fav: !prevState.fav }));
};
return (
<View>
<Pressable style={styles.but} onPress={onChangeFavorite}>
<Text style={{ color: 'white' }}>Favorite</Text>
</Pressable>
<TextInput
style={styles.input}
onChangeText={onChangeText}
placeholder='Enter task content...'
/>
<Pressable onPress={() => addItem(data)} style={styles.but}>
<Text style={{ fontWeight: 'bold', color: 'white', textAlign: 'center' }}>Add</Text>
</Pressable>
</View>
);
}
This is the module where the addItem function is passed, everything goes well until the setListOfItems function is called in App.js