Props not passed to Child component on onPress event-CodePudding

I googled and followed the solution to how to pass props to Child component but failed. I know navigation.navigate can pass the result of ImagePick without using props but I want to pass it using props instead. ListofItems should read props passed from Parent component and return the data back depending on the value of props received. However, the problem is ListofItems does not even run when props are passed. Thanks for help in advance.

Parent component

import React, {useState, useEffect} from 'react';
import ReactDOM from 'react-dom';
import ListOfItems from './UserPage/ListOfItems';
import { ImageBackground, StyleSheet, Text, View, Platform, TouchableOpacity, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import * as ImagePicker from 'expo-image-picker';

const Stack = createStackNavigator();

function Homes({ navigation, route, props }) {
  var personalColor;
  const [season,setSeason] = useState('');
  
  const receivedVal=(val)=>{
    setSeason({val})
    console.log(val);
    console.log(season);
  }

  const ImagePick = async () => {
      let result="";
      try {
      result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.All,
        allowsEditing: true,
        aspect: [4, 3],
        quality: 1,
      });
      console.log(result);
      if (!result.cancelled) {
        // navigation.navigate('ItemList',{image:result, received: receivedVal})    
           return result;
      }
    }
    catch (error) {
      console.log(error);
    };
    console.log(result);
  }

  return (
    <View style={styles.title_container}>
      <ImageBackground source={require("./assets/pages/img.png")} style={styles.image}>
        <View style={styles.button_container} activeOpacity={0.3}>
          <TouchableOpacity
            onPress={() => {    
              const res=ImagePick();
              <ListOfItems image={res} received={receivedVal('')}/>   
            }}
            style={styles.button}>
            <Text style={styles.text}>Upload</Text>
          </TouchableOpacity>
        </View>
      </ImageBackground>
    </View>
  );
}


function Home() {
  return (
    <NavigationContainer theme={MyTheme}>
      <Stack.Navigator initialRouteName="HomeSite">
        <Stack.Screen options={{ headerShown: false }} name="HomeSite" component={Homes} />
        <Stack.Screen options={{ headerShown: false }} name="ItemList" component={ListOfItems} />
      </Stack.Navigator>
     </NavigationContainer>
  );
}

ReactDOM.render(<Home/>, document.getElementById('root'));
export default Home;

Child component does not show up on the console. console.log("test") does not even run.

import React, { useState} from 'react';
import ReactDOM from 'react-dom';
// import { NavigationContainer } from '@react-navigation/native';

function ListofItems({ navigation,props}) {
    console.log("test");
    const{image}=props.image;
    const{received}=props.received;
    console.log('image',image);
}
export default ListofItems;

CodePudding user response：

Regarding "ListofItems does not even run when props are passed."

You have used ListofItems like a component (like you are trying to render something) instead of a function.

Try

// de-structure the function

import { ListOfItems } from './UserPage/ListOfItems';

// and execute the funtion onPress

ListOfItems(image={res} received={receivedVal('')) instead of <ListOfItems .../>

Hopefully this solves your console issue.

CodePudding user response：

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import ListOfItems from "./UserPage/ListOfItems";
import {
  ImageBackground,
  StyleSheet,
  Text,
  View,
  Platform,
  TouchableOpacity,
  Button,
} from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import * as ImagePicker from "expo-image-picker";

const Stack = createStackNavigator();

function Homes({ navigation, route, props }) {
  var personalColor;
  const [season, setSeason] = useState("");
  const [showList, setVisibility] = useState(false);

  const receivedVal = (val) => {
    setSeason({ val });
    console.log(val);
    console.log(season);
  };

  const ImagePick = async () => {
    let result = "";
    try {
      result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.All,
        allowsEditing: true,
        aspect: [4, 3],
        quality: 1,
      });
      console.log(result);
      if (!result.cancelled) {
        // navigation.navigate('ItemList',{image:result, received: receivedVal})
        return result;
      }
    } catch (error) {
      console.log(error);
    }
    console.log(result);
  };

  return (
    <View style={styles.title_container}>
      <ImageBackground
        source={require("./assets/pages/img.png")}
        style={styles.image}
      >
        <View style={styles.button_container} activeOpacity={0.3}>
          <TouchableOpacity
            onPress={() => setVisibility(true)}
            style={styles.button}
          >
            <Text style={styles.text}>Upload</Text>
          </TouchableOpacity>
          {showList ? (
            <ListOfItems image={res} received={receivedVal("")} />
          ) : (
            <View />
          )}
        </View>
      </ImageBackground>
    </View>
  );
}

function Home() {
  return (
    <NavigationContainer theme={MyTheme}>
      <Stack.Navigator initialRouteName="HomeSite">
        <Stack.Screen
          options={{ headerShown: false }}
          name="HomeSite"
          component={Homes}
        />
        <Stack.Screen
          options={{ headerShown: false }}
          name="ItemList"
          component={ListOfItems}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

ReactDOM.render(<Home />, document.getElementById("root"));
export default Home;

Here you go try this.