skip to Main Content

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

2

Answers


  1. 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.

    Login or Signup to reply.
  2. 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>
            </>
      
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search