How to convert 1d into 2d and store it in a react native state?

Question

I have an array,

const array = [
{"row":"0", "column": "0"}, 
{"row":"0", "column": "1"},
{"row":"1", "column": "0"},
{"row":"1", "column": "1"}, 
{"row":"2", "column": "0"}, 
{"row":"2", "column": "1"}
]

Note: the rows and columns arent predefined, it may change every time.

From the array i need to create a 2D array and store it on a state in react native, so that i can use the state to render the requirements using the array stored,

I have two problems, one is converting 1d into 2d and another one is storing it into an state for further usage,

My 1d to 2d converting function:

for (let i = 0; i < this.state.array.length; i++) {
       let row = this.state.array[i].row;
            if (newSeats[row] === undefined) newSeats[row] = [];
               newSeats[row].push(this.state.array[i]);
       }

for (let i = 0; i < this.state.array.length; i++) {
       let column = this.state.array[i].column;
             if (newSeatss[column] === undefined) newSeatss[column] = [];
               newSeatss[column].push(this.state.array[i]);
       }

It gives two arrays, so is this efficient way to convert 1d to 2d? And i cant use setstate here as it throws error saying maximum depth reached for setstate, So how to store the result in a state? and if there is any other better way make the conversion please suggest !

And my whole component:

import React, { Component} from 'react';
import { View, Text, StyleSheet, ScrollView, Dimensions, TouchableOpacity, FlatList } from 'react-native';
import { connect } from 'react-redux';
import { fetchSeatLayout } from '../../actions/HomeActions';
import Loader from '../components/loader';
import { Feather } from '@expo/vector-icons';
import { Button } from 'react-native-elements';

const w = Dimensions.get('window').width;
const h = Dimensions.get('window').height;

class SeatLayout extends Component {

    state = { isLoading: true, selectedSeatLayouts: [], seatArray: [] }

    componentDidMount() {
        this.props.fetchSeatLayout(this.props.selectedBus.id, (data) => {
            this.setState({ isLoading : false, selectedSeatLayouts: data.seats })
        }) 
       
    }
   

    seats = () => {

        let arr2d = this.state.selectedSeatLayouts.reduce((r, {column, row, name }) => {
            if (!r[row]) r[row] = [];
            r[row][column] = name;
            return r;
        }, []);
          console.log(arr2d);
  
    }


    render() {
        
        return(
            <View style={styles.container}>
                <Loader
                    loading={this.state.isLoading} />

                <View style={{ flex: 1 }}>
                    <View style={styles.headerContainer}>
                        <View style={{ paddingTop: 50, paddingHorizontal: 20, alignItems: 'center' }}>
                            <Text>30 Sep, 2020</Text>
                        </View>
                    </View>
                    
                    <View style={styles.bodyContainer}>
                           {this.seats()}    
                    </View>
                </View>
            
            

            </View>
        )
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff'
    },
    headerContainer:{
        height: h * 0.23,
        backgroundColor: '#f0eff4',
    },
    bodyContainer:{
        justifyContent: 'center'
        
    },
});


const mapStateToProps = state => {
    return {
        selectedBus: state.home.userSelectedBus,
    }
}

export default connect(mapStateToProps, {fetchSeatLayout})(SeatLayout);

Answer 1

Update your componentDidMount to this, so it saves the 2D array in the state

componentDidMount() {
  this.props.fetchSeatLayout(this.props.selectedBus.id, (data) => {
    this.setState({ isLoading : false, selectedSeatLayouts: data.seats},()=>{
      this.setState({seatArray:this.seats()})
    })
  }) 
}

Right now seats function isn't returning anything, please update it to return something

seats = () => {
  let arr2d = this.state.selectedSeatLayouts.reduce((r, {column, row, name }) => {
      if (!r[row]) r[row] = [];
      r[row][column] = name;
      return r;
  }, []);
    console.log(arr2d);
  return arr2d;
}

At this point you have a state with a parameter seatArray, you can use it as per your requirement now.

Update this code block to show something instead of calling 2darr,

<View style={styles.bodyContainer}>
  {this.seats()} //remove this to show some visual component   
</View>