How to make array in state and processing to handleFormChange

Question

im newbie in react native, i just implementation react js to native to make handleformchange but i got the error like this "cannot ready propery name of undefined" . i dont know what to do.

this is for react native, running in android and node

constructor(props) {
        super(props)
        this.state = {
            post : [],
            formData : {
                id : '',
                first_name : '',
                last_name : '' ,
                email : '',
                gender : '',
                password : '',
            }
        }
    } 


getPostAPI () {

        axios.get('http://192.168.100.7:3000/datadiri')
        .then((res) => {
            this.setState ({
                post : res.data
            })
        })
    }

sendDataDiri  () {
        axios.post('http://192.168.100.7:3000/datadiri', this.state)
        .then((res) => {

            this.setState ({
                formData : {
                    id : '',
                    first_name : '',
                    last_name : '',
                    email : '',
                    gender : '',
                    password: ''
                }         
            })
        }, (err) => {
            console.log('error : ', err);
        })
    }

handleForm = (e) => {
        let formDataNew = {...this.state.formData};
        formDataNew[e.target.name] = e.target.value;
        this.setState({
            formData : formDataNew
        })

    }
render() {
        return (
            <RegisterComponent
                handleFirstChange = {this.handleFirstChange}
                handleLastChange = {this.handleLastChange}
                handleEmailChange = {this.handleEmailChange}
                handleGenderChange = {this.handleGenderChange}
                handlePasswordChange = {this.handlePasswordChange}
                onBackPress = {this.onBackPress}
                handleForm = {this.handleForm}
                onRegisterPress={this.onRegisterPress} 
                first_name = {this.state.formData.first_name}
                last_name = {this.state.formData.last_name}
                email = {this.state.formData.email}
                gender = {this.state.formData.gender}
                password = {this.state.formData.password}
                />
        );

RegisterCOmp

<Text style={styles.textStyle}>First Name</Text>
            <TextInput  style={styles.textboxfield}
                        underlineColorAndroid='transparent'
                        onChangeText={this.props.handleForm}
                        value={this.props.first_name}
                        placeholder = {'First Name'}
                        placeholderTextColor={'rgba(221,221,221,1)'}
                        name="first_name"
            />
            <Text style={styles.textStyle}>Last Name</Text>
            <TextInput  style={styles.textboxfield}
                        underlineColorAndroid='transparent'
                        onChangeText={this.props.handleForm}
                        value={this.props.last_name}
                        placeholder = {'Last Name'}
                        placeholderTextColor={'rgba(221,221,221,1)'}
            />
            <Text style={styles.textStyle}>Email</Text>
            <TextInput  style={styles.textboxfield}
                        underlineColorAndroid='transparent'
                        onChangeText={this.props.handleForm}
                        value={this.props.email}
                        placeholder = {'Email'}
                        placeholderTextColor={'rgba(221,221,221,1)'}
            />
            <Text style={styles.textStyle}>Gender</Text>
            <TextInput  style={styles.textboxfield}
                        underlineColorAndroid='transparent'
                        onChangeText={this.props.handleForm}
                        value={this.props.gender}
                        placeholder = {'Gender'}
                        placeholderTextColor={'rgba(221,221,221,1)'}
            />
            <Text style={styles.textStyle}> Password </Text>
            <View>
                <TextInput
                    style={styles.textboxfield}
                    underlineColorAndroid='transparent'
                    onChangeText={this.props.handleForm}
                    returnKeyType={'done'}
                    value={this.props.password}
                    placeholder = {'Password'}
                    placeholderTextColor={'rgba(221,221,221,1)'}
                />
            </View>

            <TouchableOpacity style={styles.loginButtonStyle} onPress={this.props.onRegisterPress}>
                <Text style={styles.loginButtonTextStyle}>Register</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.regButtonStyle} onPress={this.props.onBackPress}>
                <Text style={styles.loginButtonTextStyle}>Back</Text>
            </TouchableOpacity>


        </View>
    </View>

        )
    }
}

RegisterComponent.propTypes = {
    handleFirstChange : PropTypes.func,
    handleLastChange : PropTypes.func,
    handleEmailChange : PropTypes.func,
    handleGenderChange: PropTypes.func,
    handlePasswordChange : PropTypes.func,
    onBackPress : PropTypes.func,
    showPassword: PropTypes.func,
    handleForm : PropTypes.func,
    onRegisterPress: PropTypes.func,
    first_name: PropTypes.string,
    last_name: PropTypes.string,
    email: PropTypes.string,
    gender: PropTypes.string,
    password: PropTypes.string, 
};

i need to know how to make e.target.name correct, i just want to put my data to array

Answer 1

onChangeText takes a text instead of the event, but there is onChange property as well, check the documentation for more details.

// this method will has text argument but not event
handleForm = (e) => {
  let formDataNew = {...this.state.formData};
  formDataNew[e.target.name] = e.target.value;

  this.setState({
    formData : formDataNew
  )
}

Updated

You should modify handleForm and TextInput:

// now it takes field name and value
handleFieldChange = (text, name) => {    
  this.setState({
    formData: {
      ...this.state.formData,
      [name]: text
    }
  });
}

// Register component takes a state of your form
// and method to change fields value
<RegisterComponent
   handleFieldChange={this.handleFirstChange}
   onBackPress={this.onBackPress}
   onRegisterPress={this.onRegisterPress} 
   formState={this.state.formData}
/>

// you can write your fields like this
<TextInput style={styles.textboxfield}
  underlineColorAndroid='transparent'
  onChangeText={text => this.props.handleFieldChange(text, 'firstName')}
  value={this.props.formState.firstName}
  placeholder = {'First Name'}
  placeholderTextColor={'rgba(221,221,221,1)'}
/>

// now you can send your data to the BackEnd
sendData = () => {
  const { formData } = this.state;
  // formData contains values of your fields
}