title: Maximum update depth exceeded
body: <p>I am getting the following error (after the data is received from the dummy server)</p>
  
  <blockquote>
    <p>Maximum update depth 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>
  </blockquote>
  
  <p>This the relevant code </p>
  
  <pre><code>class Blog extends Component {
    state = {
      posts: [],
      selectedPostId: null
    }
  
    componentDidMount () {
      axios.get("https://jsonplaceholder.typicode.com/posts").then(response =&gt; {
        const updatedDat = response.data
        const updatedData = []
        for (let i=0; i&lt;5; i++) {
        updatedDat[i].author = "Max";
        updatedDat[i].key = i;
        updatedData.push(updatedDat[i])
      }
        this.setState({posts:updatedData})
      }, function (error) {
      })
    }
  
    postClicked = (id) =&gt; {
      this.setState({selectedPostId: id})
    }
  render () {
    const newPosts = this.state.posts.map(el =&gt; {
      return &lt;Post key={el.id}
       title={el.title}
       author={el.author}
       clicked={this.postClicked(el.id)}/&gt;
    })
  
      return (
          &lt;div&gt;
              &lt;section className="Posts"&gt;
                {newPosts}
              &lt;/section&gt;
              &lt;section&gt;
                  &lt;FullPost display={this.state.selectedPostId}/&gt;
              &lt;/section&gt;
              &lt;section&gt;
                  &lt;NewPost /&gt;
              &lt;/section&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default Blog;
  </code></pre>
  
  <p>The error line in question is </p>
  
  <pre><code> postClicked = (id) =&gt; {
  &gt; 30 |   this.setState({selectedPostId: id})
    31 | }
  </code></pre>
  
  <p>and </p>
  
  <pre><code>   clicked={this.postClicked(el.id)}/&gt;
  </code></pre>
  
  <p>clicked is passed to the child component which is onCLick </p>
  
  <pre><code> &lt;article className="Post"  onClick={props.clicked}&gt;
  </code></pre>
  
  <p>Now, I am able to fix the error when I do/change something like </p>
  
  <pre><code>clicked={() =&gt; this.postClicked(el.id)}
  </code></pre>
  
  <p><strong>[Question]:</strong> Can someone tell me why do I receive the above error in first place and why does this (<code>clicked={() =&gt; this.postClicked(el.id)}</code>) is able to fix it. </p>