title: Maximum update exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate
body: <p>I'm new to React Native and no background in reactjs.
  I'm always getting an error: "Maximum update exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops."</p>
  
  <p>As you can see in the below code I want to switch watchlist on a button press. The error occurs eventhough the screen was not loaded therefore no onPress event. I'm also wondering what's the correct way to update the state. What's wrong in my trigger to update state?</p>
  
  <pre><code>export default class OverviewView extends React.Component {
  
            constructor(props){
              super(props);
  
              this.state ={ isLoading: true,
                            watchlist: 'top20',
                            curr: 'usd'
                          }
            }
  
  
            async componentDidMount(){
              const lists = ["portfolio","watchlist"];
              const list_name = this.state.watchlist;
              const curr = this.state.curr;
              const url = 'http://sample.com/api/watchlists/'+list_name+'/overview?curr='+curr;//sample.com 
                  is a sample domain but the URI applies
              const response = await fetch(url);
              const data = await response.json();
              this.setState({
                  isLoading: false,
                  list_names: lists,
                  dataSource: data,
                  head: ['Coin','Price','Volume(24H)'],
                })
            }
          render(){
              const tableData = this.state.dataSource;
              const lists = this.state.list_names;
              if(this.state.isLoading){
                return(
                  &lt;View style={{flex: 1, padding: 20}}&gt;
                    &lt;ActivityIndicator/&gt;
                  &lt;/View&gt;
                )
              }
  
          return(
  
            &lt;View style={styles.container}&gt;
                  &lt;View style={{flex: 1, flexDirection: 'row'}}&gt;
  
                    {
                  lists.map((name,i)  =&gt; (
                    &lt;Button key={i}
                    style={[styles.text]}
                    onPress={this.setState({
                      watchlist: name,
                      curr: 'btc'
                    })}
                    &gt;{name}&lt;/Button&gt;
                  ))
                  }
              &lt;Table&gt;
                &lt;TableWrapper&gt;
                    &lt;Row data={this.state.head} textStyle={styles.text} style={[styles.row, 
                         {backgroundColor: '#333333'}]}/&gt;
                    {
                      tableData.map((row,index) =&gt; (
                        &lt;Row key={index}
                         data={[row.coin,row.price,row.volume]}
                         textStyle={styles.text}
                          style={[styles.row, index%2 &amp;&amp; {backgroundColor: '#333333'}]}
                          /&gt;
                      ))
                    }
  
                &lt;/TableWrapper&gt;
              &lt;/Table&gt;
  
            &lt;/View&gt;
          );
        }
      }
  </code></pre>