How to pass props from parent component to child component in react native?

Question

I am designing a simple login page that takes username and password credentials, and I need this data to make a authentication check and if it passes, go to the second view. My problem is I haven't been able to successfully pass the username and password values as props to the child component ie, the SecureView js

This is the code I've written already. Have searched everywhere but have failed to locate a beginner friendly solution to my problem. Please help.

My TextInput code:

<TextInput
                  style={styles.input_username}
                  placeholder=" Username"
                  placeholderTextColor="#000000"
                  onChange={(event) => this.setState({username: event.nativeEvent.text})}
                  value={this.state.username}
              />

My getInitialState() method:

  var login1 = React.createClass({
    getInitialState() {
      return {
        username: '',
        password: '',
            }
 },

My onSubmitPressed() function:

onSubmitPressed() {
this.props.navigator.push({
id: 'SecureView',
passProps: {
  username: this.props.username
            }
          });
 },

My index.android file:

'use strict';
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
} from 'react-native';

var Login1 = require('./app/screens/login1');
var SecureView = require('./app/screens/SecureView');

var loginsimple = React.createClass({
 render: function() {
  return (
  //<loginsimple />
  <Navigator
        style={styles.navigatorContainer}
        initialRoute={{id: 'Login1'}}
        renderScene={this.navigatorRenderScene}
        username={this.props.username}/>
    );
  },

  navigatorRenderScene(route, navigator) {
    //  _navigator = navigator;
switch (route.id) {
  case 'Login1':
    return (<Login1 navigator={navigator}
      {...route.passProps}
        title="Login1"/>);
  case 'SecureView':
    return (<SecureView navigator={navigator}
      {...route.passProps}
        title="SecureView"/>);
 }
 },
  });

  var styles = StyleSheet.create({
   navigatorContainer: {
flex: 1,

 }
});
 AppRegistry.registerComponent('loginsimple', () => loginsimple);

In my SecureView js file, I have written a simple text element as such:

<Text> Welcome {this.props.username}!</Text> 

My output is always as such

Welcome !

What is the correct way to pass props from my first file to my SecureView file?

Answer 1

In onSubmitPressed you are passing this.props.username which is not defined. Use this.state.username instead, which is what you are setting with this.setState(...)