How to create an array of objects in React Native from seperate components?

Question

I'm new to React Native, so I understand I have alot to learn.

I'm creating a custom class component here:

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

class Square extends React.Component{
    constructor(pos,text,won,save){
        this.state = {
            pos : 0,
            text : 'EDIT',
            won : false,
            save : false,
        };
    }

    setPos = (pos) =>{
        this.setState(pos)
    }
    getPos = () => {
        return (this.pos);
    }

    setText=(text)=>{
        this.setState(text)
    }
    getText=()=>{
        return (this.text);
    }

    setWon=(won)=>{
        this.setState(won)
    }
    getWon=()=>{
        return (this.won);
    }

    setSave=(save)=>{
        this.setState(save)
    }
    getSave=()=>{
        return (this.save);
    }
};


export default Square;

Then I want to create an array of those objects in a different component and display a piece of information from each object.

import {View, Text, StyleSheet, Button, Alert} from 'react-native';
import Square from '../components/Square';





const NewGameScreen = () => {

   let arrSquare = [];

   for (let i = 0; i < 25; i++){
       arrSquare.push({

           THIS IS WHERE I'M HAVING TROUBLE

       });
   }

   console.log(arrSquare[0].getPos)
    
    return(
        <View style = {styles.screen}>
            <View style = {styles.row}>
               <Text>{arrSquare[0].getPos}</Text>
            </View>
        </View>
    )

};

However from the above code I'm sure it's clear I'm missing something. I would have expected to use something like Square[i].setPos(i); but that throws errors. The console log also gives 'undefined' so that makes me think I haven't declared something or haven't declared it properly. Thanks in advance.

Emm, let me understand this, are you using the square component as a data holder? or a scriptable object similar to unity? because to me it seems that you are using it as to just set and get the state? — Zyzz Shembesh
– Zyzz Shembesh, Commented Jul 16, 2020 at 20:56
I want to use it more as a data holder. I'm unfamiliar with Unity. My goal is to have 25 modifiable objects. If there is a better way, I'm happy to learn. — FirstOfTheDead
– FirstOfTheDead, Commented Jul 16, 2020 at 21:07

Zyzz Shembesh · Accepted Answer · 2020-07-16 21:27:05Z

2

well the way I would go about this is to have a simple array of json object something like this:

let squareArr = [{          
            id: 0,
            pos : 0,
            text : 'EDIT',
            won : false,
            save : false,
        },
        {
            id: 1,
            pos : 0,
            text : 'EDIT',
            won : false,
            save : false,
        },
        {
            id: 2,
            pos : 0,
            text : 'EDIT',
            won : false,
            save : false,
        }
]

then you can do the the read and the edit.

to display a position:

in your render method you can do this:

<View style = {styles.screen}>
     <View style = {styles.row}>
         squareArr.map((square) => <Text>{square.pos}</Text>)
     </View>
</View>

to edit a position:

if you want to change a value in your JSON then just use the object index as a way to indicate which object you wanna change. For example want to change the pos of the second object then I would do this:

squareArr[1].pos = 3

I am not quite sure what is the whole project is to give you to give you the best solution but i hope this helps..

feel free to ask if you have any questions

answered Jul 16, 2020 at 21:27

Zyzz Shembesh

2203 silver badges20 bronze badges

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

2 Comments

FirstOfTheDead Over a year ago

So am I just making my code needlessly complex by trying to use my object like this? I understand your method and will go with that if so. Thanks by the way.

Zyzz Shembesh Over a year ago

No worries @FirstOfTheDead

Collectives™ on Stack Overflow

How to create an array of objects in React Native from seperate components?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related