Insert elements into an Array with Hooks and display in a list

Question

Hello, people. I’m new to React-Native and I’m still learning some basic concepts. My current problem is this: I want to make a screen of newly searched items, so that when the user clicks to type in Textinput, it will click below the list of items he has previously searched for. But I’m making a mistake Too many re-renders. React limits the number of renders to prevent an infinite loop

I’ve done a lot of research on what might cause the mistake, but I can’t get to a final denominator.

function SearchList(){

    const [searchElement, setElement] = React.useState([]);
    const navigation = useNavigation();

    const valorDigitado = '';

    const addItem = (valor) => {
        setElement([ ...searchElement, {
            text: {valor},
        }])
    }

    return(
        <SafeAreaView>
            <View style={styles.container}>
                <View style={styles.rowContainer}>
                    <View>
                        <TouchableOpacity onPress={() => navigation.navigate('Home')}>
                            <Feather name="chevron-left" size={25} color="#53565A" ></Feather> 
                        </TouchableOpacity>
                    </View>

                    <View style={styles.searchBar}>
                        <View
                        style={{flexDirection:'row', justifyContent:'center', alignItems:'center'}}>
                            <Icon name="search" size={20} color="grey" />
                            <TouchableOpacity>
                                <TextInput 
                                style={styles.Search}
                                editable={true}
                                value={valorDigitado}
                                placeholder={"Pesquisar"}
                                returnKeyType={'search'}
                                onSubmitEditing={setElement(valorDigitado)}
                                >
                                </TextInput>
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>
                {/* <View>
                    <FlatList
                    data={searchElement}
                    renderItem={({item}) => {
                        return <Text>{item}</Text>
                    }}
                    />
                </View> */}
            </View>
        </SafeAreaView>
    )
}`

Answer 1

On this line you are calling a function (setElement) specifying a parameter, so you are not passing it by reference:

onSubmitEditing={setElement(valorDigitado)}

In such cases you must do so:

onSubmitEditing={() => setElement(valorDigitado)}

Another thing, this valueDigited will always be equal to ''. I did not understand very well what you tried. In Textinput value we put a state variable, so we have a controlled component and we can change its content between renderings. For example:

const [texto,setTexto] = useState('')
<TextInput
    value={texto} //atribuo a variável de estado, componente controlado 
    onChangeText={texto => setTexto(texto)} //Defino o novo valor a cada digitação para que na próxima renderização mantenha o valor 
/ >

Note that in the above case, I am assigning the same variable(text) that the event returns to the setText function, in which case I can pass the function as reference:

onChangeText={setTexto}