Взаимодействие между компонентами в reactjs

Мне нужно понять, как поднять состояние и методы классов до родительского компонента, если есть несколько компонентов и единственный общий родительский компонент. В моем примере кода некоторые кнопки отображаются в виде списка «li». элементы. Щелчок по любой кнопке должен изменить текст в текстовом блоке, но не меняет его. Пожалуйста, помогите мне найти мою ошибку. Вот мой код:

class TextBlock extends React.Component {
    render() {      
         return <div id = "textDiv">{this.props.text}</div>;
     }
 }

class MyButton extends React.Component { 
    render() {          
        return <button id = {this.props.id} className = "mybutton"> 
       {this.props.label}</button>;  
    }
}

class ButtonsList extends React.Component { 
    clickButton=(e)=> {
    this.props.handlerButtons(e);
}

    render() {      
        return(
            <ul>
              {buttons.map((button)=> <MyButton id = {button.id} label= 
              {button.label} onClick = {this.clickButton}/>)}         
          </ul>
         ); 
    }
}

class ParentComponent extends React.Component {
    constructor(props) {
        super(props);      
        this.state = {text: "My text"};   
}

    handlerButtons=(e)=> {
    this.setState({text: "The changed text"});
    }   

    render() {      

        return( <div>
                 <TextBlock text = {this.state.text}/>
                 <ButtonsList handlerButtons = {this.handlerButtons}/>                    
            </div>
          );
    }
}
const buttons=[{id: "id1", label: "1"}, {id: "id2", label: "2"},
{id: "id3", label: "3"}, {id: "id4", label: "4"}, {id: "id5", label: "5"}];

 ReactDOM.render(
    <ParentComponent/>,     
     document.getElementById("root")
);