Local JSON with nested arrays in Typescript/React

React
1

Hi,

I’ve been learning React and TS from Mosh’s excellent tutorial for a hobby project I am working on.

The project is a list builder for a game - Where you make selections based on what you want to play and build a roster. I’ve created json files - one for the game that has the game modes and player factions all grouped in nested object arrays and similarly a json file for each faction which has objects for each character you can pick…

Where I am getting myself in a muddle is I can import the json file using import jsonData from “”.

I have a tsx file that has defined interfaces for all the json as well using transform.tools…

Currently I am using export const data: Game = jsonData; (Game is the top level interface of the json).

My first mistake I think I have made is all the form functionality is in a component file (GameForm.tsx) rather than in the top level App.tsx…

When it comes to mapping I am using data.game.map which is fine for the top level but when I traverse I am having to hard code or change the value of the form data to be the array index of the first array … so my second select item has to use data.game[0].faction.map…

What I think I need to do is create a new array object each time to maintain the state - or several - one for each nest??

If you have managed to follow the ramble any advice on how to do this would be appreciated. Most of the time I am wanting to pass object arrays rather than just an array of strings and so I am at the stage where I am confusing myself when trying to apply understanding from tutorials…

Thanks

2

If your saying you want to pass an array inside of an object, sure you can do that just make your interface accept that. If you mean pass an object i don’t think you can do that. What you can do is pass an array of objects that represent reach submission or break points in the data. They need to be in the format of “key”: “value”

If it’s the passing data which is the problem i had a project where i took a use state and set state to each individual piece of data, then i could add strings, take em away, put em in an array, jsonify do pretty much anything then each time i tried to post it i’d review the request adjust the data then try to send to my api again

3

Thanks I think the useState setState is the way to go… I just need to wrap my head around the logic properly… Made some great progress then things got in the way and I’ve struggled to get to into gear :)…

Thanks