Can't print data after passing it through props in react-native?

Question

Hey guys I am trying to pass props from one scene to another I have achieved passing props to the desired scene this is how basically i am changing scene through renderScene file

renderScene (route, navigator) {
    return React.createElement(route.component, {
      navigator: navigator, ...route.passProps
    })
  },

this is the code through which I am passing props

modalButtonPress() {
    this.props.navigator.push({
        component: require('../Containers/blabla').default,
        passProps: {modalData: this.state.modalData}
    });
}

and in other file I am calling it using this.props.modalData and props.modalData returns me with the same data

constructor (props) {
    super(props)
    this.state = {
        modalData: props.modalData,
    }
}

while console logging the data I can see the data in the console

but when I am trying to print that data I can't see anything the screen is blank here is my render method.

render () {
    return (
      <View style={{justifyContent: 'flex-start'}}>
          <H3 style={styles.header}> {this.state.modalData._source.service_name}
          </H3>
          <Text style={styles.negativeMargin} >
              Type: <Text style={styles.bold}>{this.state.modalData._source.service_id}</Text>
          </Text>
      </View>
    )
  }

Can anybody point out what I am doing wrong in this why data is not getting render on screen.I am stuck up and confused why data is not getting print. Thanks in advance.

try props.passProps.modalData instead of this.props.modalData — Burak Karasoy
@BurakKarasoy props.passProps.modalData does not work it says cannot read property modalData of undefined. — atif
try using props passed to constructor i.e props.modalData instead of this.props.modalData. Can you console log both and show me? Also, can you show a little more code like how are you switching scenes and stuff? — Irfan Ayaz
@IrfanAyaz i have updated the question and tried using props.modalData instead this.props.modalData but the result is same i am getting the object. — atif

damusnet damusnet · Accepted Answer · 2016-08-30T09:01:37

Does console.log(this.state.modalData._source.service_name) work okay in your render method (to make sure you are accessing a valid property)?

Are you confident your layout allows your text to show on screen? No white font on white background, or zero-width view for instance? It happens a lot!

Can't print data after passing it through props in react-native?

1 Answers