Why do I get an error when I try to see my Text using useState?

Question

Before adding this, all codes were working. But I just wanted to see when I change my Search TextInput, it should be added in Text component. But I get an error, it says "too many re-renders, React limits the number of renders to prevent an infinitive loop"

What should I change to get this work?

Here is my related code:

MainScreen.js

import React, { useState } from 'react';
import { StyleSheet, Text, View, SafeAreaView, TextInput, ScrollView, TouchableHighlight } from 'react-native';
import Application from "../icons/application.svg"
import HorizontalCircles from '../HorizontalCircles';
import HorizontalDiscussion from "../HorizontalDiscussion";
import Energy from "../icons/energy.svg"
import Add from "../icons/add.svg"
import Calendar from "../icons/calendar.svg"
import Clock from "../icons/clock.svg"


const MainScreen = ({ navigation }) => {

  const [text,setText] = useState("");
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.appIcon}>
        <Application height={30} width={22} fill={"#1E2439"} />
        <View style={{ height: 30, width: 30, backgroundColor: "#DBF1F9", borderRadius: 20 }} />
      </View>
      <TextInput style={styles.input} placeholder="Search" placeholderTextColor="#B9B9C5">{setText(text)}</TextInput>
      <Text>{text}</Text>
      <View style={{ height: 100 }}>
        <ScrollView showsHorizontalScrollIndicator={false} contentContainerStyle={{ marginVertical: 20, alignItems: "center" }} horizontal={true}>
          <View style={{ height: 40, width: 40, backgroundColor: "#FFFFFF", borderRadius: 20, marginRight: 10, borderStyle: "dotted", borderWidth: 5, borderColor: "#E2E2E2" }} />
          <HorizontalCircles color={"#CFC8FF"} />
          <HorizontalCircles color={"#FFA2BF"} />
          <HorizontalCircles color={"#FEE3AA"} />
          <HorizontalCircles color={"#FEDFCC"} />
          <HorizontalCircles color={"#FFA2BF"} />
          <HorizontalCircles color={"#F3A5FF"} />
          <HorizontalCircles color={"#EFBCFF"} />
          <HorizontalCircles color={"#AFBFCF"} />
          <HorizontalCircles color={"#AEDF5F"} />
          <HorizontalCircles color={"#DDB825"} />
        </ScrollView>
      </View>

      {/* Discussion Part */}
      <Text style={styles.blackText}>Group Discussion On Going</Text>

      <View style={{ height: 250 }}>
        <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} contentContainerStyle={{ flexDirection: "row", alignItems: "center", }}>
          <HorizontalDiscussion color={"#FFF9F2"} />
          <HorizontalDiscussion color={"#E7FBFF"} />
        </ScrollView>
      </View>

      <Text style={styles.blackText}>Todays Task</Text>

      {/* Task Part */}
      <ScrollView style={{ height: 300 }}>
        <View style={{ padding: 30 }}>
          <View style={styles.task}>
            <View style={{ backgroundColor:"#FFEFE2", padding:10,borderRadius:13}}>
              <Energy height={35} width={25} fill={"#FB9238"} />
            </View>

            <View style={{ marginLeft: 15, flex: 1}}>
              <Text style={styles.blackText}>8 Tasks Today</Text>
              <Text style={styles.grayText}>Meet them & Share your experience</Text>
            </View>

            <View style={{ marginLeft: 5 }}>
              <Add height={35} width={25} fill={"#ABA8BA"} />

            </View>

          </View>

          <View style={styles.task}>
            <View style={{ backgroundColor: "#FEF8E6", padding: 10, borderRadius: 13 }}>
              <Calendar height={35} width={25} fill={"#FCC626"} />

            </View>

            <View style={{ marginLeft: 15, flex: 1 }}>
              <Text style={styles.blackText}>Event</Text>
              <Text style={styles.grayText}>Create & Share Event</Text>
            </View>

            <TouchableHighlight onPress={() => navigation.navigate("NewScreen")}>
              <View>
                <Add height={35} width={25} fill={"#ABA8BA"} />

              </View>
            </TouchableHighlight>      

          </View>

          <Text style={styles.blackText}>Proposed classes</Text>

          <View>
            <Text style={{ color:"#9993D3",fontSize:18}}>Math class</Text>
            <View style={styles.proposed}>
              <Text style={{ color:"#706E80",fontSize:20}}>Rasyid Hilman</Text>
              <View style={{ height: 35, width: 35, backgroundColor: "#FEE3AA", borderRadius: 25, marginHorizontal: 10, }} />

            </View>

            <View style={styles.proposed}>
              <View style={styles.agendaClockSvg}>
                <Calendar height={40} width={30} fill={"#D4D3DA"} />
                <Text style={{ color: "#B0AFB7", fontSize: 18, marginLeft: 10}}>August 16, 2021</Text>
              </View>

              <View style={styles.agendaClockSvg}>
                <Clock height={40} width={30} fill={"#C0BFC6"} />
                <Text style={{ color:"#AFAEB8", fontSize:18, marginLeft:10}}>15:00</Text>
              </View>
            </View>
          </View>
        </View>

      </ScrollView>

    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: "#FFFFFF",
  },
  appIcon: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  input: {
    height: 40,
    borderWidth: .5,
    borderRadius: 10,
    marginVertical: 10,
    backgroundColor: "#F7F6F9",
    marginVertical: 20,
  },
  blackText: {
    fontSize: 20,
    fontWeight: "bold",
    fontFamily: "Times New Roman",
  },
  grayText: {
    color: "#A29E97",
    fontSize: 17,
  },
  task: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 15,
    justifyContent: "space-between"
  },
  proposed: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between"
  },
  agendaClockSvg: {
    flexDirection: "row", 
    alignItems: "center",
  }


});

export default MainScreen;

score 1 · Accepted Answer · answered May 21 '21 at 06:45

1

You're calling setText within your render on this line:

<TextInput style={styles.input} placeholder="Search" placeholderTextColor="#B9B9C5">{setText(text)}</TextInput>

Take a look at the TextInput documentation: https://reactnative.dev/docs/textinput

What you probably want is:

<TextInput
  style={styles.input}
  onChangeText={setText}
  value={text}
  placeholder="Search"
  placeholderTextColor="#B9B9C5"
/>

answered May 21 '21 at 06:45

jnpdx

45,847
6
64
94

You are amazing Sir. Thank you, i understand now – May 21 '21 at 06:47
1

Glad it worked for you. Feel free to upvote/accept when available. – jnpdx May 21 '21 at 06:48
of course, ill accept your answer, it just wants me wait for 4 mins more. Thanks again. Could I ask one more question though – May 21 '21 at 06:52
1

Assuming it's easy to answer in comments, sure. – jnpdx May 21 '21 at 06:52
I am trying to add O letter in my TextInput whom placeholder is Search. Like this `View style={{flexDirection:"row", alignItems:"center"}}> O ` but i cant take O letter in textInput, i just want to get in that space. I hope its understandable :) and other problem is my Search textinput was big enough, but when i added O letter it got smaller... I dont know why – May 21 '21 at 06:55
1

I'm not sure I understand... You want the letter "O" in your `TextInput`? Like as a default value? Or you want it displayed outside of it? – jnpdx May 21 '21 at 06:56
i solved one problem, its big enough now , used `style={[styles.input, {flex:1}]}` but other problem is still there – May 21 '21 at 06:57
Not a default value. I just want to get it like an icon. It will be stayed there, wont be able to be deleted. I will just write where it says Search as placeholder – May 21 '21 at 06:58
1

Okay... so you want "O" to appear inside the border of the `TextInput` -- is that it? If so, you'll have to play with the `style` of the `TextInput` and the `View` outside of it. Probably a good idea to create a [mre] and ask a second question if you can't get it looking the way you want. Unfortunately, not something easily-answerable in the comment section here. – jnpdx May 21 '21 at 07:01
Thank you, yes i want it to appear in the border of `TextInput` I will try to do now. Appreciate it – May 21 '21 at 07:02
Hello, can u look at this question https://stackoverflow.com/questions/67803786/how-can-i-reach-the-variable-which-i-named-global-from-globalcontext – Jun 02 '21 at 13:06

Why do I get an error when I try to see my Text using useState?

1 Answers1