Passing state values between files

Question

I am having trouble passing the values of state from one file to another. I need to do this because when I get to pulling information from the DB, it will need to display more details about these values.

I have a FlatList that when is clicked it sets the value of the item clicked a state value. But it should also navigate to a new screen, while also passing these values to that new screen to be pulled from the DB.

Here is my function that sets the state and calls the function to pass values to the new screen.

_onSectionListPress = (id) {
            this.setState({ jobId: id}, () => this._showJobDetail()); 
        };

Here is my function to navigate to the new screen. But this is where I get stuck on how to pass the values.

_showJobDetail = () => {
            this.props.navigation.navigate("JobDescriptions", this.state.stakeholderID, this.state.jobId)
        };

I'm using react-navigation to try and do this.

Sorry for asking what seems simple in such a complicated way. I'm still pretty new to react-native and I'm not sure how to do this.

score 2 · Accepted Answer · answered May 25 '19 at 07:22

you should pass the state variable like this

  this.props.navigation.navigate('JobDescriptions', {
        stakeholderID: this.state.stakeholderID,
        jobId: this.state.jobId,
  });

And call those state variable like this

  this.props.navigation.getParam("stakeholderID", "noId")

score 1 · Answer 2 · answered May 25 '19 at 03:10

1

this.props.navigation.navigate('JobDescriptions', {stakeholderID: this.state.stakeholderID,})

in the new screen you can get value like this

const { navigation } = this.props;
const JobDescriptions= navigation.getParam('JobDescriptions', null);

answered May 25 '19 at 03:10

Shankar S Bavan

922
1
12
32

score 0 · Answer 3 · answered May 25 '19 at 01:31

0

You should lift the state. One way to do this is to establish a store to keep track of the data. There are many examples of how to do this, including one I described here and off-the-shelf packages like Redux.

answered May 25 '19 at 01:31

ray

26,557
5
28
27

This wasn't exactly what I was looking for, but it was still very helpful and it was very close to what I was doing. But I am doing this now in other parts of my code. Thanks! – Felis May 28 '19 at 22:48

Passing state values between files

3 Answers3