Store jsx component inside variables in react-native

Question

I am trying to store react-native jsx element inside a variable while printing inside return method but I am getting error like this: Text strings must be rendered within a component. Below is my code in which I am getting error. Any help will be appreciated:

import { Text, View, Button } from 'react-native';
import React, { useState } from 'react';

const GameScreen = (props) => {

  const [num, setNum] = useState(0);
  const [randNum, setRandNum] = useState(0);
  const [currentNum, setCurrentNum] = useState('')
  // const [jsxVal, setJsxVal] = useState('')
  let jsxVal = '';

  const setRandomNum = (num, min, max) => {
    const randNum = Math.floor(Math.random() * (max - min)) + min
    setNum(num);
    setRandNum(randNum);
    console.warn("Number is:" + num + " and random number:" + randNum);
  }

  const checkNum = (num) => {
    if (num < randNum) {
      jsxVal = <Text>Your number {num} is lower than {randNum}</Text>;
      console.warn("if")
    } else if (num === randNum) {
      jsxVal = <Text>Your number {num} is greater than {randNum}</Text>;
      console.warn("else if")
    } else {
      jsxVal = <Text>Your number {num} is greater than {randNum}</Text>;
      console.warn("else")
    }
    console.warn("checkNum")
  }

  return (
    <View>
      {
        num === 0 ? setRandomNum(props.navigation.getParam('number'), 1, 100) : null
      }
      <Text>Value is :{num}</Text>
      <View style={{
        justifyContent: 'space-around',
        paddingHorizontal: 8,
        paddingVertical: 8,
        flexDirection: 'row'
      }}>
        <Button title="Lower" onPress={() => { checkNum(num) }} />
        <Button title="Greater" onPress={() => { checkNum(num) }} />
        {
          jsxVal === '' ? null : jsxVal 
        }
      </View>
    </View>
  );
}

export default GameScreen;

Try to initialize jsxVal variable with jsx syntax (or null) and not and empty string. — ppichier
– ppichier, Commented Oct 28, 2019 at 9:20
Why store at variable? you can make the jsx as return of checkNum function, and then call the fucntion itself — whd.nsr
– whd.nsr, Commented Oct 28, 2019 at 9:34
@HelloWorld, I believe the problem was with { jsxVal === '' ? jsxVal : null }, this returns empty string when the component renders for the first time, and hence the error. But you've already edited the question to the correct form. Did it work? — Vignesh V Pai
– Vignesh V Pai, Commented Oct 28, 2019 at 9:48

whd.nsr · Accepted Answer · 2019-10-28 10:00:35Z

2

First, you can make the function returns the jsx itself:

 checkNum = (num) => {
   if (num < randNum) {
      return(<Text>Your number {num} is lower than {randNum}</Text>);
   } else if (num === randNum) {
     return(<Text>Your number {num} is greater than {randNum}</Text>);
   } else {
     return(<Text>Your number {num} is greater than {randNum}</Text>);
}}

Then, you call them method wherever you want:

 <Button title="Greater" onPress={() => { checkNum(num) }} />
 {this.checkNum(num)}

answered Oct 28, 2019 at 10:00

whd.nsr

6936 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vignesh V Pai Over a year ago

Yes, this is the correct answer and the proper method.

Sham Gir · Accepted Answer · 2019-10-28 09:58:51Z

1

You have to enclose your jsxVal into <Text> component e.g:

{
 jsxVal === '' ? null : <Text>{jsxVal}</Text> 
}

It is because, initially you are using jsxVal = '', which read as text. That must be enclosed in <Text> component. When jsxVal get some value, in your case :

jsxVal = <Text>Your number {num} is greater than {randNum}</Text>

then it can be rendered in <View> component.

answered Oct 28, 2019 at 9:58

Sham Gir

3241 silver badge9 bronze badges

3 Comments

Sumit Shukla Over a year ago

Why you have used <Text> inside variable?

Sumit Shukla Over a year ago

jsxVal = <Text>Your number {num} is greater than {randNum}</Text> This doesn't work when i put it inside <View>

Sham Gir Over a year ago

it will work if you use : {jsxVal === '' ? null : <Text>{jsxVal}</Text> }. Kindly read complete solution, you will understand, why this error occurs.

Eran · Accepted Answer · 2019-10-28 10:02:31Z

 const [message, setMessage] = useState('')
 const checkNum = (num) => {
    if (num < randNum) {
      jsxVal = `Your number ${num} is lower than ${randNum}`;
      console.warn("if")
    ......
     setMessage(jsxVal)

Text strings must be rendered within a component. meaning that '< Text >' cannot be a parameter of Button , instead you should send a simple string value and save it in the component state

<View>
      {
        num === 0 ? setRandomNum(props.navigation.getParam('number'), 1, 100) : null
      }
      <Text>Value is :{num}</Text>
      <View style={{
        justifyContent: 'space-around',
        paddingHorizontal: 8,
        paddingVertical: 8,
        flexDirection: 'row'
      }}>
        <Button title="Lower" onPress={() => { checkNum(num) }} />
        <Button title="Greater" onPress={() => { checkNum(num) }} />
        {
          jsxVal === '' ? null : jsxVal 
        }
        <Text>{message}</Text>
      </View>
    </View>

Collectives™ on Stack Overflow

Store jsx component inside variables in react-native

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related