I need to pass data forward to another component via <Link> from the react-router-native library. This worked a couple of months ago, then I upgraded RN and all of the packages that I use and it's no longer working. I found an answer which I thought related to my problem on Stack Overflow that involved changing the syntax of the props in my <Link> from:

to={{ pathname: "/search-method/", state: { ingreds: ingreds, more_needed: true } }}

to:

to="/search-method/" state={{ ingreds: ingreds, more_needed: true }}

Changing this syntax fixed the initial problem but when the next component loaded it couldn't retrieve the state data as it had before. Here's the relevant code from the next component:

componentDidMount() {
  console.log("Search method mounted")
  var ingreds = this.props.location.state.ingreds
  var more_needed = this.props.location.state.more_needed
  var no_more_needed = this.props.location.state.no_more_needed
  var initial = this.props.location.state.initial_data
  if (initial !== undefined) {
    this.setState({
      initialData: initial,
      ingredients_rough: ingreds,
      moreNeeded: more_needed
    })
  } else {
    this.setState({
      ingredients_rough: ingreds,
      moreNeeded: more_needed
    })
  }
}

and the error points to the line var ingreds = this.props.location. < this full stop specifically, giving an error message, "TypeError: Cannot read property 'state' of undefined ".

Googling only seems to return results relating to react.js and react-router-dom, I can't find any answers as to why this is no longer working for React Native, in the package I'm using which worked fine before upgrading everything. Here's what I'm importing:

import { NativeRouter, Route, Link, Redirect } from "react-router-native";

Thanks in advance if you can help.

0

There are 0 answers