Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

passing function as props generates an error in React Native(onPress is not a function, 'onPress' is an instance of Object)

$
0
0

I'm trying to trigger some action in parent component from child component and I'm using props for that. One of the props of the child is a function which updates parent's state when a button is pressed, which should cause parent to re-render but that's not the case, instead I get this error: TypeError: onPress is not a function. (In 'onPress(event)', 'onPress' is an instance of Object). I've used function as props and updated the state several times in React but in React Native I don't seem to understand what's causing this issue and how I can solve it from information I've found online.

Child component:

import * as React from 'react';import {Avatar, Button, Card, Title, Paragraph } from 'react-native-paper';const Photo:React.FC<{url:string, camera:string, handleClick:()=>void}> = ({url, camera}:{url:string, camera:string}, handleClick:()=>void) => (<Card ><Card.Content ><Paragraph style={{color:'#6200ee'}}>{camera}</Paragraph></Card.Content><Card.Cover source={{ uri: url }} /><Card.Actions><Button onPress={handleClick} mode='contained'>more</Button></Card.Actions></Card>);export default Photo;

Parent Component:

 import React, {useContext, useEffect, forwardRef, useState, Ref, useImperativeHandle, useRef} from 'react'import { View, Text, ScrollView, StyleSheet } from 'react-native'import { ActivityIndicator} from 'react-native-paper';import {theContext}  from '../utils/ContextPlaceholder'import getPhotos from '../utils/getPhotos'import Photo from './Photo'import axios from 'axios';import {PhotosViewV2} from './PhotosViewV2'import ImageViewer from 'react-native-image-zoom-viewer';interface RefObject {    getData: () => void  }export const PhotosView = forwardRef((props, ref: Ref<RefObject>)=> {    const [photos, setPhotos]=useState<any[]>([])    const[clicked, setClicked]=useState(false)    const context=useContext(theContext)    const{rover, camera, year,month,day} =context    useImperativeHandle(ref, () => ({getData}));    async function getData() {      const photos=await getPhotos(1,rover, camera, year,month,day)      setPhotos(photos)    }    return(<View><ScrollView>          {photos.map(({cam, url},idx)=>{            return <Photo handleClick={()=>setClicked(true)} camera={cam} key={idx} url={url}/>          })}</ScrollView><PhotosViewV2 clickedFromOutside={clicked} data={photos}/></View>        );  });

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>