Why is method map in react native not rendering correctly?-CodePudding

I'm writing a simple app in react native and I want to show a grid of buttons; I'm trying to fetch the title of these buttons from a .json file. This is the portion of code i have problems with:

import { View , Button, Text, Pressable} from "react-native";
import "./wordpuzzle.json";
import puzzle from "./wordpuzzle.json";

const Row = ({  }) => (
    <View style={styles.row}> </View>
  )

function Griglia(){
    
    return(
        <>
         <View style={styles.app}> 
                {puzzle.square.map(row =>(                  
                    <View > 
                                                
                        {row.map( lettera =>(
                            <>
                                {console.log(row)}
                                {console.log(lettera)} 
                            <Button onPress={()=>{console.log(lettera)}} title={lettera} color="cff3f2"> </Button> 
                            </>                         
                        ))}                     
                    </View>                     
                ))}
          </View>
        </>
    );
}
const styles = {
    app: {
    flex: 4, // the number of columns you want to devide the screen into
    marginHorizontal: "auto",
    width: 400,
      },
      row: {
        flexDirection: "row",
        borderWidth:  1,
    },
    "1col":  {
        flex:  1
      },
    
};
export default Griglia
}

The map method works fine (the console.log of row and lettera works), but it doesn't show anything on the page i'm calling the function Griglia into.

Also, this is the code of the page in question:

import React from "react";
import {Button, Text, View} from "react-native";
import Griglia from "../components/griglia";

function Gioco(){
    return(
        <>
        <View>
            <Griglia/>
        </View>
        </>
    );
}

export default Gioco

And this is the App.js:

import { NavigationContainer, StackRouter } from '@react-navigation/native';
import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Gioco from './pages/gioco';
import Home from './pages/home';

const Stack = createNativeStackNavigator();
export default function App() {
  return (
    <>
    <NavigationContainer>
      <Stack.Navigator>
            <Stack.Screen name="home" component={Home} />
            <Stack.Screen name="gioco" component={Gioco} options={{title: "Ruzzle"}} />  
        </Stack.Navigator > 
    
{/*             <Form> </Form> //da mettere in un'altra pagina 
        <StatusBar style="auto" /> */}
        
    </NavigationContainer>
    </>
    );
}

Edit: this is what the page looks like: https://i.stack.imgur.com/W5cUT.png

CodePudding user response：

try this:

{row.map(lettera => {
    console.log(row)
    console.log(lettera)
    return <Button onPress={()=>console.log(lettera)} title={lettera} color="cff3f2" />
})}

You also should install prettier to clean your syntax.

CodePudding user response：

you have to write 'return' in map methods

like:

 <>
         <View style={styles.app}> 
                {puzzle.square.map(row =>(                  
                   return (<View > 
                                                
                        {row.map( lettera =>(
                           return (<>
                                {console.log(row)}
                                {console.log(lettera)} 
                            <Button onPress={console.log(lettera)} title={lettera} color="cff3f2"> </Button> 
                            </>)                         
                        ))}                     
                    </View>)                     
                ))}
          </View>
        </>