I have an array of objects. Each object has two properties: The first one is a string and the second one is an array of urls.
this is an example of the json that I am working with:
{
data : [ {contentString : "eating sushi", ["url", "url", "url"] },... ]
}
I want to use a FlatList to render each url in an Image component. However, in visual studio code I find that the property source in the Image component is undelined and displays the following error:
Type '{ uri: IUrl; }' is not assignable to type 'ImageSourcePropType | undefined'.
Types of property 'uri' are incompatible.
Type 'IUrl' is not assignable to type 'string'.
As I understand, url is indeed a string because, as shown in the code below, the interface IUrl defines its data type as a string so I can not see why I am getting this error.
This is my code:
const Dashboard : React.FC <DashScreenProps>= (props)=>{
//interfaces
//As mentioned above url is a string
interface IUrl{
url : string
}
interface IPost{
contentString : string
urls : IUrl[]
}
//local state variables
const [arrayOfPosts, setArrayOfPosts] = useState<IPost[]>([])
const getPostsFromFollowingUsers = async():Promise<boolean>=>{
try {
const response = await fetch(REMOTE_SERVER+`/userPost/getPostsFromFollowingUsers/${id}`)
const parseResponse = await response.json()
console.log('those are the posts', parseResponse)
setArrayOfPosts(parseResponse.data)
} catch (error) {
console.log(error)
}
}
useEffect(()=>{
getPostsFromFollowingUsers()
},[])
return(
<View>
{arrayOfPosts.map(post=>{
//{contentString, urls}
return(
<FlatList
data = {post.urls}
renderItem={({item}) => {
return (
<Image source={{ uri: item }} style={{ width: 50, height: 50 }} />
)
}}
/>
)
})}
</View>
)
}
export default Dashboard
2
Answers
Try to change your
IPost
interface declaration:You are fetching the wrong key data post.urls urls not exist in the given data also the data is an object type not an array in the .map only runs in case of an array
Use this data then everything will be working fine
or Try to change your IPost interface declaration: