Question 179326 in React native Question posted in
The official React Native documentation can be found here.

Why am I getting “Text strings must be rendered within a component”?

I’m making an app with React Native and getting
this error:

Error: Text strings must be rendered within a <Text> component.

code:

  const [childsName, setChildsName] = useState('');
  const [childsNameToBeLinked, setChildsNameToBeLinked] = useState('');
  const [email, setEmail] = useState('');
  const [code, setCode] = useState('');
  const [isParent, setParent] = useState(false);
  const [isChild, setChild] = useState(false);
  const [isLinked, setLinked] = useState(false);
  const [allDoneForParents, setAllDoneForParents] = useState(false);
  const [childsNameAddedNotif, setChildsNameAddedNotif] = useState('');
  const [uri, setUri] = useState('');

  return (
      <View style={styles.container}>
        {!isParent && !isChild && (
          <View>
            <View style={styles.buttonContainer}>
               <Button title="This Is Child's Phone" onPress={() => setChild(true)} />
            </View>
            <View style={styles.buttonContainer}>
              <Button title="This Is Parent's Phone" onPress={() => setParent(true)}  />
            </View>

          </View>
        )}
        {isParent && (
          <View>
            <View style={styles.inputContainer}>
              <TextInput placeholder='@' onChangeText={(val) => setEmail(val)} value={email} />
            </View>
            <View style={styles.inputContainer}>
              <TextInput placeholder='Enter Code' onChangeText={(val) => setCode(val)} value={code} />
            </View>
            {childsNameAddedNotif && (
              <View>
                <Text>{childsNameAddedNotif}'s Phone Has Been Linked</Text>
              </View>
            )}
            {!childsNameAddedNotif && (
              <View style={styles.submitBtn}>
                <Button title='Submit' onPress={handleSubmit} />
              </View>
            )}
            
            <View style={styles.backBtnContainer}>
              <BackBtn onPress={() => setParent(false)} />
            </View>
          </View>
        )}
        {isChild && !isLinked && !code && (

              <View>
                <View style={styles.inputContainer}>
                  <TextInput placeholder="Child's First Name" onChangeText={(val) => setChildsName(val)} value={childsName} />
                </View>
                <View style={styles.submitBtn}>
                  <Button title='Submit' onPress={handleSubmit} />
                </View>
                <View style={styles.backBtnContainer}>
                  <BackBtn onPress={() => setChild(false)} />
                </View>
              </View>
          )}
        {isChild && !isLinked && code && (
              <View>
                <Text>OK, now use your phone, tap on This Phone Parent's Phone, enter your email and {code}</Text>
              </View>
          )}
        {isLinked && !allDoneForParents && (
          <View>
            <View>
              <Text>{childsNameToBeLinked}'s Phone Is Now Linked</Text>
              <Text>Would You Like To Link More Children ?</Text>
            </View>
            <View>
              <Button title='Yes' onPress={() => setLinked(false)} />
            </View>
            <View>
              <Button title='No' onPress={() => setAllDoneForParents(true)} />
            </View>
          </View>
        )}
        {allDoneForParents && (
          <View>
            <Text>All Done For You Now. Little Angel Will Notify You If Needed.</Text>
            <Text>Have a Nice Day :) </Text>
          </View>
        )}

      <StatusBar style="auto" />
    </View>

  );
}

Can you see where my strings aren’t within the Text component ?

Tags:

2

Answers


  1. 0

    The issue coming from this line

     <Text>{childsNameToBeLinked}'s Phone Is Now Linked</Text>

    You need to add the template string and dollar sign for the variable.

    <Text>{`${childsNameToBeLinked}'s Phone Is Now Linked`}</Text>

    The same for

    <Text>{childsNameAddedNotif}'s Phone Has Been Linked</Text>

    It should be

    <Text>{`${childsNameAddedNotif}'s Phone Has Been Linked`}</Text>
    Login or Signup to reply.
  2. 0

    Okay, so this happens to me quite often and it’s usually, imo, the text editor. I copied your code and didn’t get this error. I also can’t see where there is an inappropriate string outside of a Text component. Since I couldn’t, here are a few different ways you can troubleshoot without having to send us all your code.

    The quickest way I solve this is to comment out everything and slowly uncomment each section until I find where the error is coming from and go from there. Usually it’s a space your can’t see or improper conditional.

    If you’re using VSCode, sometimes if there is a space after a tag [ex: ] when you press ctrl + s to save, it will take that space as a text string. Usually, however, it leaves {" "}.

    If none of that works, you can try to convert your string conditionals to

    childsNameAddedNotif !== ""

    While it means the same thing, it’s work a try because sometimes this is my problem.

    Adding the template strings to your Text component would make no difference the way you’re using it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search