title: Binding setState() to a global function only affects one instance of a component
body: <p><strong>Note: I have edited the question after the changes I have made according to Nicholas Tower's answer.</strong></p>
  
  <p>I have a global function which bound to a component and changes it's state.
  I want to build a form builder system. There is a global function named <code>setLabel</code> which is bound to a component named <code>InputBox</code> and changes it's state. This global function is triggered via another component named <code>ModalPanel</code> which controls the editable properties on the bound component <code>InputBox</code>. I have simplified the function and component class for simplicity of this question.</p>
  
  <p>Here is the global function:</p>
  
  <pre><code>function setLabel(postID, attributeName ){
  
      var text = 'example';
      if(text !== ''){
  
          this.setState({ [attributeName] : text});
  
      }
  }
  </code></pre>
  
  <p>And here is the component which is bound to the <code>setLabel</code> function. Notice how <code>setLabel</code> function is passed from parent <code>InputBox</code> component to child <code>ModalPanel</code> component function as a property.</p>
  
  <pre><code>class InputBox extends Component{
  
      constructor(props){
          super(props);
          this.state = {
              placeholder : '',
              maxlength: '',
              type: '',
          }
  
          this.setLabel = setLabel.bind(this); // Binding this to the global function.
      }
  
      render(){
  
          let elementId = "inputElement-" + this.props.idCounter;
          let mainElement = &lt;Form.Control
                                id = {elementId}
                                type = {this.state.type}
                                placeholder = {this.state.placeholder} 
                                maxLength = {this.state.maxlength}
                            /&gt;
          return  &lt;Row&gt;
                      &lt;ModalPanel
                          handleHide = {this.props.handleHide}
                          handleShow = {this.props.handleShow}
                          setLabel = {this.setLabel}
                      /&gt; 
                  &lt;/Row&gt;
      }
  }
  </code></pre>
  
  <p>Lastly, below is the <code>ModalPanel</code> component function where the <code>setLabel</code> function is triggered. </p>
  
  <pre><code>function ModalPanel(props){
  
      return(
          ......................
          ......................
          ......................
          &lt;Button variant="primary" onClick = {() =&gt; props.setLabel()}&gt;Save changes&lt;/Button&gt;
          ......................
          ......................
          ......................)
  }
  </code></pre>
  
  <p><code>setLabel</code> function which is aimed to set the state of <code>InputBox</code> must be triggered when a button is clicked in the <code>ModalPanel</code> component. The problem is, there are multiple rendered <code>&lt;InputBox /&gt;</code> components on the window and when I try to use this functionality, "the state change" only affect the first instance of <code>&lt;InputBox /&gt;</code> component. What I want to do is that, every instance should have their own internal state and <code>setLabel()</code> function should be bound to the specific component from where it is called. So that, this function can be able to set the state of different component instances. How could I do that?</p>
  
  <p><strong>Addition:</strong></p>
  
  <p>Please check the link below to see a gif image showing how my system works wrong. As you can see, even though I choose the third input box element to edit it's properties (in this case, set it's placeholder text), the change is being made to the first one.</p>
  
  <p><a href="https://gfycat.com/crispunfortunatechicken" rel="nofollow noreferrer">Go to gif</a></p>