title: Array State update in React-native
body: <p>I'm trying to update a specific element of array state in React-native. As an example, I created 3 Modals with its initial visibility as false.</p>
  
  <p>Here I want to independently control 3 Modals with each button on the corresponding Modal page. So I set the initial state variable "modalVisible" as an array with 3 length. Then, tried to update one element of modalVisible with this kind of command =>  <code>this.setState({modalVisible[2]: true})</code>, which ends up not working with this <code>error(Syntax Error: ... Unexpected token)</code>. If this is not possible, then I have to find the way of doing this equivalently. For instance in the for loop, I need to write like this : <code>{this.state.modalVisible_{i}}</code> so that the code can programmably know where to locate.</p>
  
  <p><strong>The below is my current code.</strong></p>
  
  <pre><code> constructor(props) {
      super(props);
      this.state = {
        modalVisible: [false,false,false]
      };
    }
  
  
    setModalVisible(visible,th) {
      this.setState({modalVisible[th]: visible});
    }
  
  
    _render_modal(){
      var rows = [];
      for (var i=0; i &lt; 2; i++) {
        rows.push(
        &lt;View&gt;
          &lt;TouchableHighlight onPress={() =&gt; {
            this.setModalVisible(true,i)
            }}&gt;
            &lt;Text&gt;Show Modal {i} th..&lt;/Text&gt;
          &lt;/TouchableHighlight&gt;
  
          &lt;Modal
            animationType={"slide"}
            transparent={false}
            visible={this.state.modalVisible[i]}
            onRequestClose={() =&gt; {alert("Modal has been closed.")}}
            &gt;
           &lt;View style={{marginTop: 22}}&gt;
            &lt;View&gt;
              &lt;Text&gt;Hello World!&lt;/Text&gt;
  
              &lt;TouchableHighlight onPress={() =&gt; {
                this.setModalVisible(!this.state.modalVisible[i],i)
              }}&gt;
                &lt;Text&gt;Hide Modal&lt;/Text&gt;
              &lt;/TouchableHighlight&gt;
  
            &lt;/View&gt;
           &lt;/View&gt;
          &lt;/Modal&gt;
  
        &lt;/View&gt;
  
        );
      } 
  
      return(
         &lt;View&gt;{rows}&lt;/View&gt;
        );
    }
  
  
  render() {
      var spinner = this.state.isLoading ?
      ( &lt;ActivityIndicator
            size='large'/&gt; ) :
      ( &lt;View/&gt;);
      //이런건 렌더링 되자마자. 
      //dynamically modal 을 만들 수가 있나?
  
      return (
  
        &lt;View style={styles.container}&gt;
          {this._render_modal()}
        &lt;/View&gt;
      );
  }
  </code></pre>