0

Looking at my code for few hours, I was not able to understand the root cause for this exception

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

This error is located at:
in RCTView (created by View)
in View (created by Card)
in Card (created by StartGameScreen

Can anyone give me a hint? Where do I have to check analyzing? I have a Card component indeed. Is this the first place to check according to the error message?

Card

import {View, StyleSheet} from 'react-native'
import Colors from '../../constants/colors'

function Card({children}) {

   return (
     <View style = {styles.card}> {children} </View>
   )
}
export default Card;

StartGameScreen

function StartGameScreen({onPickNumber}) {

const [enteredNumber, setEnteredNumber] = useState('')

function numberInputHandler(enteredText) {
    setEnteredNumber(enteredText)
}

function resetInputHandler() {
    setEnteredNumber('')
}

function confirmInputHandler() {
    const choseNumber = parseInt(enteredNumber)
    if (isNaN(choseNumber) || choseNumber <= 0 || choseNumber > 99) {
        Alert.alert('Invalid number', 'Number has to be a number between 1 and 99', [{text:'Okay', style:'destructive', onPress:resetInputHandler}]);

        return;
    }

    onPickNumber(choseNumber);
}

return (
   <View style={styles.rootContainer}>
       <Title>Guess my number</Title>
       <Card>
           <InstructionText>dsd</InstructionText>
            <View style={styles.textInputContainer}>
                <TextInput style={styles.numberInput} maxLength={2} keyboardType="number-pad" autoCapitalize='none' onChangeText={numberInputHandler} value={enteredNumber}/>
            </View>
   
            <View style = {styles.buttonsContainer}>
                <View style={styles.buttonContainer}>
                    <PrimaryButton onPress={resetInputHandler}>Reset</PrimaryButton>
                </View>

                <View style={styles.buttonContainer}>
                    <PrimaryButton onPress={confirmInputHandler}>Confirm</PrimaryButton>
                </View>     
            </View>
        </Card>
    </View>      
 )
}

InstructionText

function InstructionText({children}) {
     return (
         <Text style={styles.instructionText}>{children}</Text>     
    )
   }
Iva
  • 2,447
  • 1
  • 18
  • 28
Melodias
  • 33
  • 6
  • 1
    Care to share your code? – tomerpacific Aug 07 '22 at 13:04
  • Hi @tomerpacific. I added some code. Not sure if these are enough – Melodias Aug 07 '22 at 13:11
  • Somewhere in your code, a string is being returned. You should wrap it with `Text` i.e. `{someTextString}`. From the code above I can't see anything wrong though. Maybe look inside TextInput or PrimaryButton. – Irfanullah Jan Aug 07 '22 at 13:17
  • Hello @IrfanullahJan. One question. Is it possible to use a debugger for this kind of error just being able to follow steps in different components? – Melodias Aug 07 '22 at 13:23
  • Maybe this will help https://reactnative.dev/docs/debugging Or quick and dirty way to narrow it down: comment out the children of `Card` component and then see if the error goes away. If yes, you can uncomment the children one by one. – Irfanullah Jan Aug 07 '22 at 13:26
  • Hi @IrfanullahJan, if I comment out the `Card`component in `StartGameScreen`, it works. Now, do you have any idea why it fails there? – Melodias Aug 07 '22 at 13:50

1 Answers1

1
const InstructionText = ({children}) => {
     return (
         <Text style={styles.instructionText}>{children}</Text>     
        )    
}

This should work !!

if you have spaces in your return statement, you have to wrapping it in parenthesis () and using one line per each tag.

Iva
  • 2,447
  • 1
  • 18
  • 28