Ytukyg

I just started development with react native and i'm having difficulty getting the value of an input field through props.

Parent

 class HomeContainerScreen extends Component {

         state = {

             userName:'',

             passWord:''

         }



     userLogin=()=>{

        alert(this.state.userName);

     }

  render() {

    return (

     <HomeScreen 

     userLogin = {this.userLogin} 

     userName = {this.state.userName} 

     passWord =  {this.state.passWord}

     />

    );

  }

}



export default HomeContainerScreen;

Child

import React, {Component} from 'react';

import {Platform, StyleSheet, Text, View,Image} from 'react-native';

import { Container, Content, Form, Input, Item, Label, Button} from 'native-base'

 class HomeScreen extends Component {

  render() {

    return (

     <Container>

         <Content contentContainerStyle={{alignItems:'center', justifyContent:'center',top:150}}>

             <Image style={{height:200, width:200, alignSelf:"center"}} source={require('../../assets/imgs/logo.jpg')}/>

         </Content>

         <Content>

          <Form>

            <Item stackedLabel>

              <Label>Username</Label>

              <Input onChangeText={(text=>this.setState({userName:this.props.userName}))}/>

            </Item>

            <Item stackedLabel last>

              <Label>Password</Label>

              <Input onChangeText={(text=>this.setState({passWord:this.props.passWord}))} />

            </Item>

            <Button 

                onPress={()=>this.props.userLogin()}

                style={{width:'80%', alignSelf:'center',margin:20}} iconLeft block>

                <Text style={{color:'white', fontSize:16}}>Sign In</Text>

            </Button>



          </Form>

        </Content>

     </Container>

    );

  }

}

export default HomeScreen

i've set it to get the value when the form is submitted, but on submit anything happens.
Please any help on how to get it working.

You're setting the state of your child component, not the parent. You could pass another callback function as a prop, so that the call to this.setState happens within your parent component, not the child.

Parent:

setUserName = (userName) => {

    this.setState({ userName: userName })

}

setPassWord= (passWord) => {

    this.setState({ passWord: passWord})

}

inside render():

<HomeScreen

    userLogin = {this.userLogin} 

    userName = {this.state.userName} 

    passWord =  {this.state.passWord}

    setUserName = {this.setUserName}

    setPassWord = {this.setPassWord}

/>

and in child:

<Input onChangeText={this.props.setUserName}/>

...

<Input onChangeText={this.props.setPassWord}/>

Also, this call to setState:

this.setState({ userName: this.props.userName })

Won't do much as it just sets the state to the same value as it already has. You probably want to set it to the new value.