title: How to call onChangeText function when mapping it from array
body: <p>I am using an <strong>Array</strong> to <strong>map data</strong> by using <strong>higher order function map</strong>. And I am also using <strong>cutome component InputField</strong> which is receiving props. but when I call the function it says.</p>
  
  <blockquote>
    <p>Failed prop type: The prop <code>onChangeText</code> is marked as required in
    InputField. but its value is <code>undefined</code>.</p>
  </blockquote>
  
  <p>So when I console.warn the email and password it shows empty.</p>
  
  <p><strong><em>Here is my code</em></strong></p>
  
  <p><strong>SignIn (Screen)</strong></p>
  
  <pre><code>import React, { Component } from "react";
  import { StatusBar, View, Text, TouchableOpacity } from "react-native";
  import styles from "./styles";
  import InputField from "../../components/InputField";
  
  class SignIn extends Component {
    state = {
      email: "",
      password: "",
      textInputData: [
        {
          inputType: "email",
          placeholder: "Enter Email",
          multiline: false,
          autoCorrect: false,
          autoFocus: true,
          onChangeText: this.handleEmailChange
        },
        {
          inputType: "password",
          placeholder: "Enter Password",
          multiline: false,
          autoCorrect: false,
          autoFocus: false,
          onChangeText: this.handlePasswordChange
        }
      ]
    };
  
    //handle email text input change
    handleEmailChange = email =&gt; {
      this.setState({ email: email });
    };
  
    //handle password text input change
    handlePasswordChange = password =&gt; {
      this.setState({ password: password });
    };
  
    replaceScreen = screen =&gt; {
      const { navigate } = this.props.navigation;
      navigate(screen);
    };
  
    render() {
      return (
        &lt;View style={styles.mainContainer}&gt;
          &lt;StatusBar backgroundColor={"#455A64"} /&gt;
          {this.state.textInputData.map((item, index) =&gt; {
            return (
              &lt;View key={index} style={styles.inputViewContainer}&gt;
                &lt;InputField
                  inputType={item.inputType}
                  placeholder={item.placeholder}
                  multiline={item.multiline}
                  autoCorrect={item.autoCorrect}
                  autoFocus={item.autoFocus}
                  onChangeText={item.onChangeText}
                /&gt;
              &lt;/View&gt;
            );
          })}
  
          &lt;TouchableOpacity
            style={styles.buttonContainerStyle}
            activeOpacity={0.7}
            onPress={() =&gt; {
              this.replaceScreen("HomeNavigation");
            }}
          &gt;
            &lt;Text style={styles.buttonTextStyle}&gt;SignIn&lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
  
          &lt;View style={styles.bottomContainer}&gt;
            &lt;Text&gt;Don't have an account? &lt;/Text&gt;
            &lt;TouchableOpacity
              activeOpacity={0.7}
              onPress={() =&gt; {
                this.replaceScreen("SignUp");
              }}
            &gt;
              &lt;Text style={styles.signUpTextStyle}&gt;SignUp&lt;/Text&gt;
            &lt;/TouchableOpacity&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      );
    }
  }
  export default SignIn;
  </code></pre>
  
  <p><strong>InputField (Custome Component)</strong></p>
  
  <pre><code>import React, { Component } from "react";
  import { TextInput, StyleSheet } from "react-native";
  import { PropTypes } from "prop-types";
  
  class InputField extends Component {
    constructor(props) {
      super(props);
      this.state = {
        secureInput: !(
          props.inputType === "text" ||
          props.inputType === "email" ||
          props.inputType === "number"
        )
      };
    }
  
    render() {
      const {
        inputType,
        placeholder,
        multiline,
        autoCorrect,
        autoFocus,
        onChangeText
      } = this.props;
      const { secureInput } = this.state;
  
      return (
        &lt;TextInput
          inputType={inputType}
          secureTextEntry={secureInput}
          placeholder={placeholder}
          multiline={multiline}
          autoCorrect={autoCorrect}
          autoFocus={autoFocus}
          onChangeText={onChangeText}
          style={styles.textInputStyle}
        /&gt;
      );
    }
  }
  
  InputField.propTypes = {
    inputType: PropTypes.string.isRequired,
    placeholder: PropTypes.string.isRequired,
    multiline: PropTypes.bool,
    autoCorrect: PropTypes.bool,
    autoFocus: PropTypes.bool,
    onChangeText: PropTypes.func.isRequired
  };
  
  const styles = StyleSheet.create({
    textInputStyle: {
      color: "black",
      fontSize: 16
    }
  });
  
  export default InputField;
  </code></pre>
  
  <p>How to solve this. I am waiting for your solution. And please let me know if I am using the right way or not to do this.
  Thanks in advance.</p>