React Native, Navigating a prop from one component to another

Issue

handleShowMatchFacts = id => {
  //  console.log('match', id)
    return fetch(`http://api.football-api.com/2.0/matches/${id}?Authorization=565ec012251f932ea4000001fa542ae9d994470e73fdb314a8a56d76`)
    .then(res => { 
   //   console.log('match facts', matchFacts)
        this.props.navigator.push({
        title: 'Match',
        component: MatchPage,
        passProps: {matchInfo: res}

     })
       // console.log(res)
  }) 
}
  

I have this function above, that I want to send matchInfo to matchPage.

I take in that prop as follows below:

'use strict'

import React from 'react'
import { StyleSheet, View, Component, Text, TabBarIOS } from 'react-native'
import Welcome from './welcome.js'
import More from './more.js'

export default class MatchPage extends React.Component {
  constructor(props) {
    super(props);
  }
  componentWillMount(){

    console.log('mathc facts ' + this.props.matchInfo._bodyInit)
  }



    render(){
        return (
            <View>

      </View>

        )
    }
}

All the info I need is in that object - this.props.matchInfo._bodyInit. My problem is that after ._bodyInt, I'm not sure what to put after that. I've tried .id, .venue, and .events, they all console logged as undefined...

Solution

assuming you are receiving json object as response , you would need to parse the response before fetching the values.

var resp = JSON.parse(matchInfo);
body = resp['_bodyInit'];

Answered By - Sricharan Kambhammettu