How i can make progress bar make progress when click a button in other file at reactjs

Question

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:

   import .....
   
   const testData = [
      { bgcolor: "#6a1b9a" },

   ];

   class myclass extends Component {

   state = {
       percetange: 0,
   }

   myedit = () => {
      this.setState({percentage: this.state.percentage + 10});
   }        

    render(){
     return{
        <div>
         <h3> <h2> Choose one button </h2>
             <button style={{color:this.state.mycolor}} className="myword" onClick={this.myedit}> 
                 Button1 
              </button> 
          <h2>or</h2> 
          <MyOtherButton /> 
          </h3>
          {testData.map((item, idx) => (
            <ProgressBar key={idx} bgcolor={item.bgcolor} completed={this.state.percentage} />
           ))}
          <br />
         </div>
     }
    }
   }

   
   import .....
   const testData = [
      { bgcolor: "#6a1b9a" },

   ];

   class MyOtherButton extends Component {
     
     state = {
       percetange: 0,
     }

     myfunc = () => {
      this.setState({percentage: this.state.percentage + 10});
     }

     render() {
      return (
      <div>
       <button className="myword" onClick={this.myfunc} > 
                Button2 </button> 
       {testData.map((item, idx) => (
            <ProgressBar key={idx} bgcolor={item.bgcolor} completed={this.state.percentage} />
        ))}                                                                                                     
      </div>
     )
    }
   }

   import ....
   const ProgressBar = (props) => {
         const { bgcolor, completed } = props;
         return (
                <div style={containerStyles}>
                 <div style={fillerStyles}>
                    <span style={labelStyles}>{`${completed}%`}</span>
                 </div>
               </div>
         );
    }

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.

Answer 1

You could create a parent component with a percentage state and pass it down to the progress bar component. Then in the parent component create a method to change the progress value and pass it down to both of your button components.