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

Typescript: How to pass functions into React Component?

$
0
0

I got some undefined errors when I am passing the function that I mentioned below. How should I pass this function with 2 steps to the child?

I have a file structure like this:Root.tsx > Integrations.tsx > GoogleFitIntegration.tsx

So in Root.tsx I passed handleGoogleFitPreferences function like below:

    return (<Integrations        handleGoogleFitPreferences={(dailySteps: boolean, workouts: boolean,sleep:boolean,weight:boolean,bodyTemperature: boolean) =>           this.handleGoogleFitPreferences(dailySteps,workouts,sleep,weight,bodyTemperature)}        navigation={this.props.navigation}      />    );  }  private handleGoogleFitPreferences(dailySteps: boolean, workouts: boolean,sleep:boolean,weight:boolean,bodyTemperature: boolean): void {    console.log(`daily-steps: ${dailySteps}`, `sleep: ${sleep}`, `workouts: ${workouts}`);  }

Then in Integrations.tsx I got the func. and passed it to another child like below:

readonly handleGoogleFitPreferences:(dailySteps: boolean, workouts: boolean,sleep:boolean,weight:boolean,bodyTemperature: boolean) => void;return <GoogleFitIntegration handleGoogleFitPreferences={(dailySteps: boolean, workouts: boolean,sleep:boolean,weight:boolean,bodyTemperature: boolean) => props.handleGoogleFitPreferences(dailySteps,workouts,sleep,weight,bodyTemperature)} setIsGoogleFitOpen={handleBackPress} />;

In GoogleFitIntegration.tsx I got the func. and run it with a button like below:

readonly handleGoogleFitPreferences:(dailySteps: boolean, workouts: boolean,sleep:boolean,weight:boolean,bodyTemperature: boolean) => void;//state    const [dailySteps, setDailySteps] = React.useState<boolean>(true);    const [workouts, setWorkouts] = React.useState<boolean>(false);    const [sleep, setSleep] = React.useState<boolean>(true);    const [weight, setWeight] = React.useState<boolean>(false);    const [bodyTemperature, setBodyTemperature] =      React.useState<boolean>(false);<CustomButton          width="100%"          height={40}          label="Save"          onPress={() =>  props.handleGoogleFitPreferences(dailySteps,workouts,sleep,weight,bodyTemperature)}        />

Viewing all articles
Browse latest Browse all 6287

Trending Articles



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