how to parse values from JSON.stringified data in a text component sent from a different page

Question

with regard to this tutorial "React Router Native - Passing Data" https://www.youtube.com/watch?v=SdOWxoH3HLg by @benawad user:4272160 I can't figure out how to extract bob or 5 from {"val1:"bob","val2":5} from the stringified string data in <Text>JSON.stringify(location.state)}</Text> when passing data between pages

I've tried to contact @benawad through a comment, I've searched google and here for similar but found nil relevant. I tried a regex unsuccessfully but there has to be a better way anyway...

code is at https://github.com/benawad/react-router-native-example/tree/1_advanced

// Home.js
import React from "react";
import { View, Text, Button } from "react-native";

export default ({ history }) => (
  <View>
    <Text>This is the home page</Text>
    <Button title="change page" onPress={() =>
    history.push("/products", {val1: "bob", val2: 5})
    />
  </View>
);


// Products.js
import React from "react";
import { View, Text, Button } from "react-native";

 export default ({ history, location }) => (
  <View>
  <Text>Product 1</Text>
  <Text>Product 2</Text>
  <Text>{JSON.stringify(location.state)}</Text>
  <Button title="change page" onPress={() => history.push("/")}/>
  </View>
);

I thought about trying to JSON.parse the stringified data. No joy. I tried location.state.val but just got

TypeError: undefined is not an object (evaluating 'location.state.val')

what are you trying to achieve or solve? your code snippet is not like the github code? — Meabed, Aug 01 '19 at 21:48
@Meabed I just want to get bob out of {"val1:"bob","val2":5} but the trouble is that it is stringified and inside a component in Products.js nb snippet is the implemention from the video tutorial before the button was implemented as a separate component changePageButton.. — user1613312, Aug 02 '19 at 06:20
@hong develop given that {"val1:"bob","val2":5} is stringified & sitting inside a component in Products.js how do I get at it? nb JSON.parse not run anywhere at all - it was just an idea to parse a string back to an object in order to get at bob or 5 but I could not figure out how to do it — user1613312, Aug 02 '19 at 06:26

score 0 · Answer 1 · answered Aug 02 '19 at 05:11

0

You need to pass state through the history api. Change your Home component to

export default ({ history }) => (
  <View>
    <Text>This is the home page</Text>
    <Button title="change page" onPress={() => 
    history.push("/products", {val1: "bob", val2: 5)} />
  </View>
);

and then access location.state.val1 and location.state.val2 directly in your Products component.

See https://github.com/benawad/react-router-native-example/blob/1_advanced/ChangePageButton.js#L9 for the similar history line in the tutorial code.

The JSON.stringify used in the example code is just there as an illustration so that the entire location.state can be displayed in a Text element.

answered Aug 02 '19 at 05:11

azundo

5,902
1
14
21

my point is that I get TypeError: undefined is not an object (evaluating 'location.state.val1') doing it like that... – user1613312 Aug 02 '19 at 06:32
In your example code you are not passing any location state through the `history` api - did you update your `Home` component code to `history.push("/products", {val1: "bob", val2: 5})` instead of just `history.push("/products")`? – azundo Aug 02 '19 at 06:52
Sorry azundo. Yes I did that already. Unfortunately, I just copied & pasted the wrong bit of code when posting the question late last night. Duh... – user1613312 Aug 02 '19 at 07:09

score 0 · Answer 2 · answered Aug 02 '19 at 05:32

You can pass props to history object,

<Button title="change page" 
  onPress={() => history.push({
    pathname: '/',
    state: { locationData: JSON.stringify(location.state) } //JSON.stringify needed if you want to pass object otherwise don't use.
  })}
/>

In the component which is rendered with / route, you can access the props like,

{JSON.parse(props.location.state.locationData)}        //Functional component
{JSON.parse(this.props.location.state.locationData)}   //Class based component

Note: JSON.parse needed if object is being passed otherwise no need to use.

how to parse values from JSON.stringified data in a text component sent from a different page

2 Answers2