Hello I am having an issue in mobile testing with react native expo "Text string must be rendered within a "

Trying and catching i identify that my issue is in this grid return, i am building a tic-tac-toe game but in web testing run fine but not in mobile.

I suppose that my wrong code is in the double maping but i am not sure about that, the other way is use an array of 9 positions

 return (
        < >
        <View style={styles.container}>
          {!endGame ?<Text style={styles.text}>{shift} 's turn</Text> : 
          <Text style={styles.text}>Winner is {winner}</Text>}
            {board.map((row, index ) => { 
                 index1 = index
                return ( 
                     <View style={{flexDirection: "row"}}> {row.map((item, index) => {
                             index2 = index
                            return (
                              <Sign endGame={endGame} row={index1} col={index2} item={item}  handleClick={(dat1,dat2)=> handleClick(dat1,dat2)} xorO={xorO} />
                            )
                        })}
                   
                    </View>
                )
            })}
              
        </View>
   
        </>

the grid

import React, {useState,useEffect} from 'react'
import {View, StyleSheet, Text} from 'react-native'
import Sign from '../sign'

const Grid = () => {
    const row1 = ["","",""]
    const row2 = ["","",""]
    const row3 = ["","",""]
    const [xorO, setXorO] = useState(true)
    const [board, setBoard] = useState([row1,row2,row3])
    const [endGame, setEndGame] = useState(false);
    const [winner, setWinner] = useState(null);
  
    const handleClick = (index1, index2) => {
        let letter = xorO ? 'X' : 'O'
        let newBoard = [...board]
        newBoard[index1][index2] = letter
        setBoard(newBoard)
        setXorO(!xorO)
    }
    let shift = xorO ? 'X' : 'O'
    let index1=null, index2=null

  useEffect(()=>{
      if(board[0][0] === 'X' && board[0][1] === 'X' && board[0][2] === 'X'){
           setEndGame(true)
           setWinner('X')
      }
        if(board[1][0] === 'X' && board[1][1] === 'X' && board[1][2] === 'X'){
            setEndGame(true)
           setWinner('X')
        }
        if(board[2][0] === 'X' && board[2][1] === 'X' && board[2][2] === 'X'){
            setEndGame(true)
            setWinner('X')
        }
        if(board[0][0] === 'X' && board[1][0] === 'X' && board[2][0] === 'X'){
            setEndGame(true)
            setWinner('X')
        }
        if(board[0][1] === 'X' && board[1][1] === 'X' && board[2][1] === 'X'){
            setEndGame(true)
            setWinner('X')
        }
        if(board[0][2] === 'X' && board[1][2] === 'X' && board[2][2] === 'X'){
            setEndGame(true)
            setWinner('X')
        }
        if(board[0][0] === 'X' && board[1][1] === 'X' && board[2][2] === 'X'){
            setEndGame(true)
            setWinner('X')
        }
        if(board[0][2] === 'X' && board[1][1] === 'X' && board[2][0] === 'X'){
            setEndGame(true)
           setWinner('X')
        }
        if(board[0][0] === 'O' && board[0][1] === 'O' && board[0][2] === 'O'){
            setEndGame(true)
            setWinner('O')
        }
          if(board[1][0] === 'O' && board[1][1] === 'O' && board[1][2] === 'O'){
            setEndGame(true)
            setWinner('O')
          }
          if(board[2][0] === 'O' && board[2][1] === 'O' && board[2][2] === 'O'){
            setEndGame(true)
            setWinner('O')
          }
          if(board[0][0] === 'O' && board[1][0] === 'O' && board[2][0] === 'O'){
            setEndGame(true)
            setWinner('O')
          }
          if(board[0][1] === 'O' && board[1][1] === 'O' && board[2][1] === 'O'){
            setEndGame(true)
            setWinner('O')
          }
          if(board[0][2] === 'O' && board[1][2] === 'O' && board[2][2] === 'O'){
            setEndGame(true)
            setWinner('O')
          }
          if(board[0][0] === 'O' && board[1][1] === 'O' && board[2][2] === 'O'){
            setEndGame(true)
            setWinner('O')
          }
          if(board[0][2] === 'O' && board[1][1] === 'O' && board[2][0] === 'O'){
            setEndGame(true)
            setWinner('O')
          }

  },[board])
    return (
        < >
        <View style={styles.container}>
          {!endGame ?<Text style={styles.text}>{shift} 's turn</Text> : 
          <Text style={styles.text}>Winner is {winner}</Text>}
            {board.map((row, index ) => { 
                 index1 = index
                return ( 
                     <View style={{flexDirection: "row"}}> {row.map((item, index) => {
                             index2 = index
                            return (
                              <Sign endGame={endGame} row={index1} col={index2} item={item}  handleClick={(dat1,dat2)=> handleClick(dat1,dat2)} xorO={xorO} />
                            )
                        })}
                   
                    </View>
                )
            })}
              
        </View>
   
        </>
    )
}

export default Grid

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        
    },
    text: {
        fontSize: 30,
        color: 'red'
    }
       
});

the sign

import React from 'react'
import { Text, View, StyleSheet, TouchableHighlight } from 'react-native'

 const Sign = (props) => {
     const { row,col,item,handleClick, endGame } = props
    return (
        <>
        {!endGame ?
        <TouchableHighlight 
  activeOpacity={0.6}
  onPress={() =>{handleClick(row,col)}}
   underlayColor= "rgba(255,255,255,0.0 1)"
>
  <View style={styles.grid}>
        <Text style={styles.text}>{item}</Text>
          </View>
</TouchableHighlight>:
 <View style={styles.grid}>
        <Text style={styles.text}>{item}</Text>
          </View>}
       </>
    )
}

export default Sign

const styles = StyleSheet.create({
grid :{
       
        
       borderRadius: 10,
       borderWidth: 1,
 
       margin: 5,
       borderColor: '#fff',
       padding: 10,
       shadowColor: '#000',
       shadowOffset: {
           width: 0,
           height: 2   
       },
       shadowOpacity: 0.25,
       shadowRadius: 3.84,
       elevation: 5,      
       width: 100,
       height: 100,
   },
   text: {
    fontSize: 40,
    fontWeight: 'bold',
    color: 'white',
    textAlign: 'center',
}
})

CodePudding user response：

This problem can be a bit difficult to see, but sometimes it can help to format the code (e.g. with prettier).

The problem here is an extra space just before the {row.map...:

                return ( 
                     <View style={{flexDirection: "row"}}> {row.map((item, index) => {
                             index2 = index

If you format the code it will be more obvious:

            <View style={{ flexDirection: 'row' }}>
              {' '}
              {row.map((item, index) => {
                index2 = index;