title: Calling a function from another in ReactJs
body: <p>I have the following ReactJS component:</p>
  
  <h3>articles_list.jsx</h3>
  
  <pre><code>import React from 'react';
  import marked from 'marked';
  import './articles_list.css';
  
  export default class ArticlesList extends React.Component {
  
    constructor(props) {
      super(props);
      this.state = {
        articles: null
      }
    }
  
    componentWillMount() {
      fetch('/articles_all')
      .then(res =&gt; res.json())
      .then(json =&gt; {
        this.setState({
          articles: json.articles
        });
      });
    }
  
    handleClick(e) {
      e.preventDefault();
      var elem = e.target;
      var file = elem.getAttribute('data-file').split('.')[0];
      fetch('/article/'+file, {
        headers: {
          'Accept': 'text/markdown'
        }
      })
      .then(res =&gt; res.text())
      .then(txt =&gt; marked(txt))
      .then(html =&gt; document.getElementById('article-text').innerHTML = html)
    }
  
    render() {
  
      var teste = []
  
      if (this.state.articles === null) {
        teste.push(&lt;div id="no-articles" key="1"&gt;No articles&lt;/div&gt;)
      } else {
        {this.state.articles.forEach( function(element, index) {
          teste.push(&lt;div onClick={this.handleClick} data-file={element.file} className="articles-menu-item" key={index.toString()}&gt;{element.title}&lt;/div&gt;);
        }.bind(this))}
      }
  
      return(
        &lt;div className="articles-list"&gt;
          &lt;div className="articles-list-title"&gt;
            ARTICLES
          &lt;/div&gt;
          &lt;div id="menu-body" className="menu-body"&gt;{teste}&lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>As you may see, it fetches as list of articles and creates links. When these links are clicked the corresponding article is load in a certain area of the page.</p>
  
  <p>The code is working perfectly, but now I need to load a certain article before any of the links to be clicked. Then I decided to break the code inside <code>handleClick</code> like this:</p>
  
  <pre><code>   loadArticle(file) {
       fetch('/article/'+file, {
         headers: {
           'Accept': 'text/markdown'
         }
       })
       .then(res =&gt; res.text())
       .then(txt =&gt; marked(txt))
       .then(html =&gt; document.getElementById('article-text').innerHTML = html)
     }
  
     handleClick(e) {
      e.preventDefault();
      var elem = e.target;
      var file = elem.getAttribute('data-file').split('.')[0];
      loadArticle(file);
    }
  </code></pre>
  
  <p>My idea with this is to invoke <code>loadArticle</code> inside <code>render</code> to load an specific article when the component loads, like this:</p>
  
  <pre><code>return(
    &lt;div className="articles-list"&gt;
      &lt;div className="articles-list-title"&gt;
        ARTICLES
      &lt;/div&gt;
      &lt;div id="menu-body" className="menu-body"&gt;{teste}{this.loadArticle('my_specific_article')}&lt;/div&gt;
    &lt;/div&gt;
  );
  </code></pre>
  
  <p>It works and now <code>my_specific_article</code> loads correctly when I navigate to the page. But...</p>
  
  <p>But now when I click the links, that were working fine before, I got an error</p>
  
  <blockquote>
    <p>Uncaught ReferenceError: loadArticle is not defined</p>
  </blockquote>
  
  <p>And if I do </p>
  
  <pre><code>   handleClick(e) {
      e.preventDefault();
      var elem = e.target;
      var file = elem.getAttribute('data-file').split('.')[0];
      this.loadArticle(file);
    }
  </code></pre>
  
  <p>using <code>this</code>, then I get </p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'loadArticle' of null</p>
  </blockquote>
  
  <p>How should I deal with this? I know it is a matter of context but, being new to ReactJS, I really don't know how to proceed.</p>
  
  <h2>EDIT</h2>
  
  <p>This is not a duplicate of <a href="https://stackoverflow.com/questions/43717638/reactjs-component-does-not-re-render-after-setstate">this question</a>, as it was marked. The reason is simple. In the mentioned question the function to bind is a event handler and in my problem a function being called by another. In fact, my event handler (similar to the other question) was working fine without the <code>bind</code>, then we are not talking about the same thing.</p>