title: How can I use setState() to modify a multidimensional array in React Native?
body: <p>I'm currently trying to add a React component into the third layer of my multidimensional array. My structure is as follows:</p>
  
  <pre><code>constructor(props) {
          super(props);
  
          /**
           * The state variables pertaining to the component.
           * @type {Object}
           */
          this.state = {
              structure : [ // Block
                  [ // Slot 1
                      [ // Layer 1
                          &lt;Text&gt;text 1&lt;/Text&gt;, // Text1
                      ]
                  ]
              ],
          };
  }
  </code></pre>
  
  <p><code>this.state.structure</code> contains an array for the <code>slots</code>, which contains an array for the <code>layers</code> which contains an array consisting of <code>Text</code> components.</p>
  
  <p>I've tried to use both <code>concat()</code> and <code>push()</code> to try to set the <code>structure</code> array, but both give me errors like "cannot read property of undefined", etc. This is my current <code>addText()</code> function:</p>
  
  <pre><code>addText() {
          this.setState((previousState) =&gt; ({
              structure : previousState.structure[0][0].concat(&lt;Text&gt;text2&lt;/Text&gt;),
          }));
  }
  </code></pre>
  
  <p>The <code>addText()</code> function is called upon pressing a button in my application.</p>
  
  <p>I'm also rendering my array of <code>Text</code> components on the current layer directly through the array:</p>
  
  <pre><code>{ this.state.structure[0][0] }
  </code></pre>
  
  <p>I feel like I'm staring the problem directly in the face, but have no idea what's causing the issue. I'm expecting to be able to add another <code>Text</code> to the container, but nothing I've tried to do seems to be working.</p>