CODEWITHSUNDEEP
react-native
sniperline047
sniperline047

Reputation: 44

React-Native TextInput one step behind in Child Component

TextInput in Child Component on logging is one step behind in my Input

Parent Component:

import React from 'react';
import {
  View,
  Text,
} from 'react-native';
import NumberInput from '../../Components/NumberInput'; //child component

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      number: '',
    };
  }

  onChange = value => {
    this.setState({number: value});
    console.log(this.state.number);
  };

  render() {
    return (
      <View>
        <Text>Login</Text>
        <NumberInput onChange={this.onChange} />
      </View>
    );
  }
}

Child Component

import React from 'react';
import {View, Text, TextInput} from 'react-native';
import {withNavigation} from 'react-navigation';

const NumberInput = ({onChange}) => {
  return (
    <View>
      <Text>Enter mobile number to continue</Text>
      <TextInput
        style={styles.input}
        keyboardType={'phone-pad'}
        placeholder="999-999-9999"
        underlineColorAndroid="transparent"
        autoCompleteType="tel"
        maxLength={10}
        onChangeText={value => onChange(value)}
      />
    </View>
  );
};

export default withNavigation(NumberInput);

logging screenshot

Upvotes: 0

Views: 623

Answers (1)

SDushan
SDushan

Reputation: 4631

Pass your console.warn() as a callback to this.setState()

this.setState({
    number: value
},() => {
    console.warn(this.state.number);
});

Upvotes: 1

Related Questions