I have a table in my database cold Apoet in my table field could name so I try to bring the name from the database but when I run the app this message appear
undefined is not an object (evaluating abc.name)
below my code
import React from 'react';
import {useEffect} from 'react';
import {useState} from 'react';
import { useRoute } from '@react-navigation/native';
import { DataStore } from 'aws-amplify';
import { Apoet } from '../../models';
const ProductScreen = () => {
const route = useRoute();
console.log(route);
const {abc, setABC}= useState<Apoet | undefined>(undefined);
useEffect (()=>{
if(!route.params?.id){
return ;
}
DataStore.query(Apoet,route.params.id).then(setABC)
},[route.params?.id]);
return (
<View>
<Text>{abc.name} </Text>
</View>
)}
Your useState is wrong, change with square brackets. Also be sure route changes as you expect otherwise it will be undefined again since your initial state value is also undefined
const [abc, setABC] = useState<Apoet | undefined>(undefined);
You've incorrectly accessed the return value from the useState hook, it returns an array, not an object.
const {abc, setABC} = useState<Apoet | undefined>(undefined);
You also use an undefined initial value, so attempting to access into it will throw an error.
Fix the return and use array destructuring assignment and use a valid initial value.
const [abc, setABC] = useState<Apoet>({});
...
<Text>{abc.name}</Text>
abc is now defined and can access a name property that will be undefined util the state is updated.
Or if you want to keep it allowed to be undefined, use a null check or Optional Chaining operator on the name property access.
Example:
const [abc, setABC] = useState<Apoet | undefined>();
...
<Text>{abc && abc.name}</Text>
or
<Text>{abc?.name}</Text>