Компонент React не обновляется из реквизита

Что вам нужно, так это состояние. Вы не должны использовать переменную таким образом, она должна быть в состоянии и изменять это состояние асинхронно.

Измените контейнер для кнопок на это.

export default class MyButtonContainer extends Component {

  constructor() {
    this.state = {
      objProp: true
    }
    this.onclick = this.onclick.bind(this);
  }

  onclick() {
    this.setState({ objProp: !this.state.objProp })
  }

  render() {
    return (
      <MyButton
        onClick = {() => { this.onclick() }}
        text = {this.state.objProp.toString()}
      />
    );
  }
}

Демо

Используйте государство, чтобы держать свой objProp

React выполнит повторную визуализацию, когда будет вызван setstate, он не будет повторно отображен автоматически.

export default class MyButtonContainer extends Component {

      state = {
          objProp: true
      }

      onclick = () => {
        this.setState({ objProp: !this.state.objProp })
      }

      render() {
        return (
          <MyButton
            onClick = {() => { this.onclick() }}
            text = {this.state.objProp.toString()}
          />
        );
      }
    }
}

Всякий раз, когда есть что-то, в чем вы хотите, чтобы пользовательский интерфейс изменился, это должно быть либо через Состояние, либо через реквизит, переданное ему.

Оба приведенных ответа верны, если вы хотите повторно отрисовать свой компонент, вы должны использовать this.setState. поэтому есть два способа получить обновленные данные в React Component.

1) поместите ваш объект в состояние и установитеState. 2) если вы действительно не хотите использовать свой объект в состоянии, вы можете сделать обходной путь, например, взять переменную i в своем состоянии, и при назначении данных в вашем объекте просто выполните this.setState ({i + 1}), поэтому из-за изменение состояния приведет к повторной визуализации вашего компонента, хотя это не лучший способ решить эту проблему, потому что для повторной визуализации вы должны установить состояние.

import React, { Component } from 'react'
constructor(props){
 super(props);
 this.state = {i:0}
}
const obj = {
   objProp: true
};

export default class MyButtonContainer extends Component {
   render() {
      return (
          <MyButton
              onClick = {() => {
                      obj.objProp = !obj.objProp ;
                      let {i} = this.state ; 
                      i = i + 1; 
                      this.setState(i)}}
                      text = {obj.objProp.toString()}
          />
      );
   } 
}

class MyButton extends Component {
  render() {
      return (
          <button
              onClick = {this.props.onClick}
          >
             {this.props.text}
          </button>
      )
   } 
}