title: How i can make progress bar make progress when click a button in other file at reactjs
body: <p>i am new in reactjs and i have a problem. I have two buttons and user click one of them. When user click the first button the onClick function is in the same js file and i have find a solution to move progress bar by click. When the user clicked the second button the onClick function is on other js file and i don't know how to make progress when this occur. Below it's my code:</p>
  <pre><code>   import .....
     
     const testData = [
        { bgcolor: &quot;#6a1b9a&quot; },
  
     ];
  
     class myclass extends Component {
  
     state = {
         percetange: 0,
     }
  
     myedit = () =&gt; {
        this.setState({percentage: this.state.percentage + 10});
     }        
  
      render(){
       return{
          &lt;div&gt;
           &lt;h3&gt; &lt;h2&gt; Choose one button &lt;/h2&gt;
               &lt;button style={{color:this.state.mycolor}} className=&quot;myword&quot; onClick={this.myedit}&gt; 
                   Button1 
                &lt;/button&gt; 
            &lt;h2&gt;or&lt;/h2&gt; 
            &lt;MyOtherButton /&gt; 
            &lt;/h3&gt;
            {testData.map((item, idx) =&gt; (
              &lt;ProgressBar key={idx} bgcolor={item.bgcolor} completed={this.state.percentage} /&gt;
             ))}
            &lt;br /&gt;
           &lt;/div&gt;
       }
      }
     }
  
     
     import .....
     const testData = [
        { bgcolor: &quot;#6a1b9a&quot; },
  
     ];
  
     class MyOtherButton extends Component {
       
       state = {
         percetange: 0,
       }
  
       myfunc = () =&gt; {
        this.setState({percentage: this.state.percentage + 10});
       }
  
       render() {
        return (
        &lt;div&gt;
         &lt;button className=&quot;myword&quot; onClick={this.myfunc} &gt; 
                  Button2 &lt;/button&gt; 
         {testData.map((item, idx) =&gt; (
              &lt;ProgressBar key={idx} bgcolor={item.bgcolor} completed={this.state.percentage} /&gt;
          ))}                                                                                                     
        &lt;/div&gt;
       )
      }
     }
  
     import ....
     const ProgressBar = (props) =&gt; {
           const { bgcolor, completed } = props;
           return (
                  &lt;div style={containerStyles}&gt;
                   &lt;div style={fillerStyles}&gt;
                      &lt;span style={labelStyles}&gt;{`${completed}%`}&lt;/span&gt;
                   &lt;/div&gt;
                 &lt;/div&gt;
           );
      }
  </code></pre>
  <p>With this way i understand that i am generate two progress bar, but how i can generate only one when click the button that is in another js file in this situation MyOtherButton
  To be more specific i want to make one progress bar and that bar makes progress by clicking one of the buttons.</p>