How can we pass data from the main function to the secondary function? React-Native-CodePudding

I want to pass a value from my parent function to my child function. but I don't know what to do. please help advice

The language I use is react native. I want to send search data to main function

this is my code

Main Function

export default function Home() {
  return (
    <View>
      <HeaderHome Upload={Upload} Uri={Uri} />
    </View>
  );
}

Second Function

export default function HeaderHome({ Upload, Uri }) {
  const navigation = useNavigation();
  const [showScrollView, setShowScrollView] = useState(false);
  const [search, setSearch] = useState('');

  const onPress = () => {
    setShowScrollView(!showScrollView);
  };

  console.log(search);

  return (
    <View>
      {showScrollView ? (
        <View>
          <TextInput
            placeholder="Search..."
            placeholderTextColor="#000"
            onChangeText={(e) => setSearch(e)}
          />
          <TouchableOpacity onPress={() => onPress()}>
            <Text>Cancel</Text>
          </TouchableOpacity>
        </View>
      ) : (
        <View>
          <View>
            <Ionicons
              name="md-search"
              style={styles.iconSearch}
              onPress={() => onPress()}
            />
            <Ionicons
              name="person-circle"
              onPress={() => navigation.navigate('Menu', { Upload, Uri })}
            />
          </View>
        </View>
      )}
    </View>
  );
}

CodePudding user response：

Create a callback function that you pass as a prop from Home to HeaderHome. This could look as follows.

export default function Home() {
  const [search, setSearch] = useState('')
  
  return (
    <View>
      <HeaderHome setHomeSearch={setSearch} Upload={Upload} Uri={Uri} />
    </View>
  );
}

In HeaderHome you can call that function in the onPress function and set the state search in the Home component as follows.

export default function HeaderHome({ Upload, Uri, setHomeSearch }) {
  const navigation = useNavigation();
  const [showScrollView, setShowScrollView] = useState(false);
  const [search, setSearch] = useState('');

  const onPress = () => {
    setShowScrollView(!showScrollView);
  };

  console.log(search);

  const onSearchSet = (text) => {
    setSearch(text)
    setHomeSearch(text)
  } 

  return (
    <View>
      {showScrollView ? (
        <View>
          <TextInput
            placeholder="Search..."
            placeholderTextColor="#000"
            onChangeText={(e) => onSearchSet(e)}
          />
          <TouchableOpacity onPress={() => onPress()}>
            <Text>Cancel</Text>
          </TouchableOpacity>
        </View>
      ) : (
        <View>
          <View>
            <Ionicons
              name="md-search"
              style={styles.iconSearch}
              onPress={() => onPress()}
            />
            <Ionicons
              name="person-circle"
              onPress={() => navigation.navigate('Menu', { Upload, Uri })}
            />
          </View>
        </View>
      )}
    </View>
  );
}