updating nested array - ReactNative

Question

I'm trying to make a tic-tac-toe game in react native. My board is represented by an array in the state:

state = {
    tablero : [
  [null, null, null], 
  [null, null, null], 
  [null, null, null]
],
}

My board component is:

<View>
    <View style={styles.fila}>
      <Text style={[styles.celda, {borderTopWidth: 0, borderLeftWidth: 0}]}>
        {this.state.tablero[0][0]}
      </Text>
      <Text style={[styles.celda, {borderTopWidth: 0}]}>
        {this.state.tablero[0][1]}
      </Text>
      <Text style={[styles.celda, {borderTopWidth: 0, borderRightWidth: 0}]}>
        {this.state.tablero[0][2]}
      </Text>  
    </View>
    <View style={styles.fila}>
      <Text style={[styles.celda, {borderLeftWidth: 0}]}>
        {this.state.tablero[1][0]}
      </Text>
      <Text style={styles.celda}>
        {this.state.tablero[1][1]}
      </Text>
      <Text style={[styles.celda, {borderRightWidth: 0}]}>
        {this.state.tablero[1][2]}
      </Text>  
    </View>
    <View style={styles.fila}>
      <Text style={[styles.celda, {borderBottomWidth: 0, borderLeftWidth: 0}]}>
        {this.state.tablero[2][0]}
      </Text>
      <Text style={[styles.celda, {borderBottomWidth: 0}]}>
        {this.state.tablero[2][1]}
      </Text>
      <Text style={[styles.celda, {borderBottomWidth: 0, borderRightWidth: 0}]}>
        {this.state.tablero[2][2]}
      </Text>  
    </View>
  </View>

I want to know how would I update my board when on press. I tried with spread operator but couldnt figure it out

can you show how you are rendering your board possibly using CodeSandbox for easy sharing? — Naismith
– Naismith, Commented Nov 17, 2018 at 15:59

Daniil Andreyevich Baunov · Accepted Answer · 2018-11-17 16:32:40Z

2

This is how you can do this with spread operators.

state = {
    tablero : [
      [null, null, null], 
      [null, null, null], 
      [null, null, null]
    ],
}

// ---------- some code -----

function onPress({x, y}, newValue) {// press cell index
  this.setState({...state,
    tablero: Object.assign([],[...state.tablero], {
      [y]: Object.assign([], [...state.tablero[y]], {[x]: newValue})
    })
  });
}

// if we call, for example, onPress({x: 1, y: 2}, 1);
// Output state will be
// { tablero: [ [ null, null, null ], [ null, null, null ], [ null, 1, null ] ] }

Btw, great article here: https://medium.com/@giltayar/immutably-setting-a-value-in-a-js-array-or-how-an-array-is-also-an-object-55337f4d6702

edited Nov 17, 2018 at 16:32

answered Nov 17, 2018 at 16:24

Daniil Andreyevich Baunov

2,8833 gold badges28 silver badges50 bronze badges

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

Comments

Colin Burke · Accepted Answer · 2018-11-17 16:20:11Z

0

Here's a simple example to get you started:

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  state = {
    table: [[0, 0, 0]]
  };

  toggle = (e, i) => {
    const { table } = this.state;
    table[0][i] = table[0][i] === 0 ? 1 : 0;
    console.log(table);
    this.setState({ table });
  };

  render() {
    return (
      <ul>
        {this.state.table[0].map((n, i) => (
          <li id={n} onClick={e => this.toggle(e, i)}>
            {n}
          </li>
        ))}
      </ul>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

CodeSandbox here.

answered Nov 17, 2018 at 16:20

Colin Burke

17.3k13 gold badges57 silver badges84 bronze badges

Collectives™ on Stack Overflow

updating nested array - ReactNative

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related