How do I pass data to another screen/class in react Native?

Question

I am trying to pass a Array of key value pairs from UebungenAnzeigen Class to PlanBeenden class which aswell is another screen. I am working with react navigation and I have a Stacknavigator. I would be very happy if you can give me a driect example code with my state param. Thank you.

class UebungenAnzeigen extends React.Component {
  

    state = {

      data:[
        {
        
          "name": "Herabschauender Hund",
          "kategorie":"anfaenger",
          "erklaerung": "Steißbein zur Decke | Rücken gerade | Kopf in Verlängerung der Wirbelsäule",
          "photo": require('./fotosAsanas/Herabschauender_Hund.png'),
          "dauer": 30
      },
         
      {
          "name": "Katze",
          "kategorie" : "geuebt",
          "erklaerung": "Steißbein zur Decke | Rücken gerade | Kopf in Verlängerung der Wirbelsäule",
          "photo": require('./fotosAsanas/Katze.png'),
          "dauer": 20
      },
      {
        "name": 'Kuh',
        "kategorie" : "eingeschraenkt",
        "erklaerung": "Steißbein zur Decke | Rücken gerade | Kopf in Verlängerung der Wirbelsäule",
        "photo": require("./fotosAsanas/Kuh.png"),
        "dauer": 20
      },
        ]
    }

    render() {
   
      return (
     
      <View>
     <Button  title="Auswahl" onPress={() => this.props.navigation.navigate('PlanBeenden',  What to put 
     in here to get the state to the next page? )}/>
    </View>
  
      );

        
  }
}


// the class that should receive the data
//What do I have to put in to receive the data of UebungAnzeigen?

class PlanBeenden extends React.Component {

  render() {
    let data = this.props.route.params?.data; //How to do this correctly for state of UebungAnzeigen?
    console.log(data)
    return (
      <View >
        <Button style={stylesButtons.button} title="Go back" onPress={() => this.props.navigation.navigate('Auswahl')} />
      </View>
      );
  }
}

Answer 1

Here is how you can pass the data to the next screen:

//........
  render() {
    return (
      <View>
        <Button
          title="Auswahl"
          onPress={() =>
            this.props.navigation.navigate("PlanBeenden", { data: this.state.data })
          }
        />
      </View>
    );
  }
}

Here is the working example: Expo Snack

Full Source code:

import * as React from 'react';
import { Text, View, Button, FlatList } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={UebungenAnzeigen} />
        <Stack.Screen name="PlanBeenden" component={PlanBeenden} />
        <Stack.Screen name="Auswahl" component={Auswah} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

function Auswah() {
  return <Text>Auswahl</Text>;
}

class UebungenAnzeigen extends React.Component {
  state = {
    data: [
      {
        name: 'Herabschauender Hund',
        kategorie: 'anfaenger',
        erklaerung:
          'Steißbein zur Decke | Rücken gerade | Kopf in Verlängerung der Wirbelsäule',
        dauer: 30,
      },

      {
        name: 'Katze',
        kategorie: 'geuebt',
        erklaerung:
          'Steißbein zur Decke | Rücken gerade | Kopf in Verlängerung der Wirbelsäule',
        dauer: 20,
      },
      {
        name: 'Kuh',
        kategorie: 'eingeschraenkt',
        erklaerung:
          'Steißbein zur Decke | Rücken gerade | Kopf in Verlängerung der Wirbelsäule',
        dauer: 20,
      },
    ],
  };

  render() {
    return (
      <View>
        <Button
          title="Auswahl"
          onPress={() =>
            this.props.navigation.navigate('PlanBeenden', {
              data: this.state.data,
            })
          }
        />
      </View>
    );
  }
}

// the class that should receive the data
//What do I have to put in to receive the data of UebungAnzeigen?

class PlanBeenden extends React.Component {
  render() {
    let { data } = this.props.route.params; //How to do this correctly for state of UebungAnzeigen?
    console.log(JSON.stringify(data));
    return (
      <View>
        <Button
          title="Go back"
          onPress={() => this.props.navigation.navigate('Auswahl')}
        />
        {data && (
          <FlatList
            data={data}
            renderItem={({ item }) => <Text>{item.name}</Text>}
          />
        )}
      </View>
    );
  }
}

Docs: Passing Params

Answer 2

You must pass an object

<Button  
  title="Auswahl" 
  onPress={() => this.props.navigation.navigate('PlanBeenden', {data: yourData} )}/>

and in your PlanBeenden screen you'll receive params

class PlanBeenden extends React.Component {
  const {data} = this.props.route
  
  //const data contain the data passed
  render(
    return(
      //your UI components
    )
  )

}