weird problem after setState with toUpperCase in react native

Viewed 117

I have a really weird problem in a setState in react native. Probably because I came from reactJS and maybe i'm not using the best practices in react native.

Here the code:

import React, { Component, useState } from 'react';
import { ScrollView, Alert, View, Text } from 'react-native';
import { Button, Input } from 'react-native-elements';
import Icon from 'react-native-vector-icons/FontAwesome';
import {AppStyles, ButtonStyles, InputStyles, UtilStyles, LoginRegistrationStyles} from '../styles/Main';
import { RegisterStyles } from '../styles/Register';
import Utils from "../utils/Utils";

export default class RegisterScreen extends Component {
    static navigationOptions = {
        title: 'Registrazione',
    };

    constructor(props) {
        super(props);

        this.state = {
            loading: false,
            infoUser:{}
        }
    }

    onTextChange = (text, key) => {
        console.log("original text:" + text);
        const fakeState = Utils.deepCopy(this.state);
        fakeState.infoUser[key] = text.toUpperCase();
        this.setState(fakeState);
        console.log("new text:" + fakeState.infoUser[key]);
    }

    render() {        
        return (
            <ScrollView contentContainerStyle={[AppStyles.container, UtilStyles.p20]}
                keyboardShouldPersistTaps="handled">

                <Input containerStyle={InputStyles.containerInput}
                    inputStyle={InputStyles.input}
                    inputContainerStyle={InputStyles.inputContainer}
                    leftIconContainerStyle={InputStyles.inputIcon}
                    underlineColorAndroid='transparent'
                    placeholder="Codice fiscale"
                    value={this.state.infoUser.cf}
                    keyboardType="default"
                    onChangeText={(text)=>this.onTextChange(text,"cf")}
                    leftIcon={
                        <Icon
                            name='user'
                            size={24}
                            color='black'
                        />
                    } />
            </ScrollView>
        );
    }

    register() {

    }
}

then in the real device I entered those cases, with the relativies console logs:

A
original text:A
new text:A


Ab
original text:Ab
new text:AB


Abc
original text:ABAbc
new text:ABABC

It seems something about the manipulation of an object by ref and not by val, since after modified the input text even the original one is changed. I also tried to copy the original text in a variable, so I referred to the new variable (I used a function of mine, deepCopy, which return a perfect copy of the input object but without his pointers) but nothing changed..

2 Answers

This might help, I think prev state should resolve your problem the rest is just removing unecessary code

onTextChange = (text, key) => {
        console.log("original text:" + text);
        this.setState((prevState) => ({
              infoUser: {
               ...prevState.infoUser,
               [key]: text.toUpperCase(),
              }
            }));  
    }
Related