title: REACT: Use setState in a function called from another component?
body: <p>I'm starting in ReactJS and I'm doing a score system for my game in React.</p>
  
  <p>I used a component called Score to manage it. </p>
  
  <p>I did a score value in the state that can be incremented by <code>increment()</code>. </p>
  
  <p>The problem is that I would like to use this function from my App component (it's an example, I created <code>incrementScore()</code> to show it).</p>
  
  <p>However my <code>increment()</code> can't gain access to <code>this.setState()</code> when the function is called from another component.</p>
  
  <p>Note that I created a button "Increment" inside <code>Score.js</code> which uses <code>increment()</code> and it's works perfectly.</p>
  
  <p>Have you a solution or could you just give a clue? Thanks!</p>
  
  <p><strong>App.js:</strong></p>
  
  <pre><code>import Score from './Score'
  
  class App extends React.Component {
  
    incrementScore() {
      Score.prototype.increment()
    }
  
    render() {
      return (
          &lt;div&gt;
            &lt;h1 id="title"&gt;Game&lt;/h1&gt;
            &lt;Score /&gt;
            &lt;Canvas /&gt; {/*Not important here, just for the game*/}
          &lt;/div&gt;
      )
    }
  }
  
  export default App
  </code></pre>
  
  <p><strong>Score.js:</strong></p>
  
  <pre><code>import React from 'react'
  
  class Score extends React.Component {
  
    constructor() {
      super()
      this.state = {
        score: 0
      }
      this.increment = this.increment.bind(this)
    }
  
    increment() {
      this.setState({
        score: this.state.score + 1 //this.state.score + 1
      })
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;p id="score"&gt;Score: {this.state.score}&lt;/p&gt;
          &lt;button&gt;Incrementer&lt;/button&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default
  </code></pre>