React Native：从功能组件导出功能

Question

Issue:

1. I'm trying to figure out how to export a function that is called "addPostCode" from the functional component "ContractHandler".

2. I want to use "addPostCode" in an other functional component called "RentalDetailScreen" so that when I navigate to the next page it will trigger the "addPostCode" and store the state of "postCode" in "ContractHandler".

This is the "ContractHandler.js":

import React, { useState } from 'react';

const ContractHandler = () => {

  const [postCode, setPostCode] = useState();

  const addPostCode = (data) => {
    setPostCode(data)
    console.log(postCode)
  };

  return(
    <View>
      <Text></Text>
    </View>
  )

}

export default ContractHandler;

These are parts of the RentalDetailScreen.js where I navigate to the next page and want to trigger the "addPostCode"-function and send the "postCode"-value to the "ContractHandler.js".

This is the import:

import { addPostCode } from '../../database/ContractHandler';

This is the navigation with the "addPostCode"-function.

<TouchableOpacity onPress={() => { navigation.navigate('SecurityDetail'); addPostCode(postCode); }}>
  <View style={slider.buttonStyle}>
    <Text style={slider.textStyle}>Neste</Text>
    <Ionicons name='ios-arrow-forward'style={slider.iconStyle} />
  </View>
</TouchableOpacity>

"postCode" is just a variable that is given a value from a TextInput.

If I'm not being clear enough please let me know and I will try to explain better :)

Answer 1

The components' own state cannot be set from outside (technically you can solve it but this is not the right way). If you wanna share state between components, use global state manager (redux) or Context or if the components are siblings, just use their common parent to store the state.

Answer 2

There are two ways to solve this. You can use a state manager like redux or you have to pass the function as props from component to component. Personally I would use redux because it makes it simpler to share state between components.