Как правильно переписать код AngularJS для React?

У меня есть приведенный ниже код, который считывает и обновляет данные в локальном хранилище и из него, и он отлично работает с AngularJS.

Вот моя проблема: Я пытаюсь переписать код Angularjs для React, но он выдает неожиданный токен ошибки.

УгловойJS:

<script>
    var app = angular.module('myapp', []);
    
    app.controller('MainCtrl', function($scope) {
    
     //called at initiazation, reads from localstorage if array is present there
      $scope.checkAndInitiateFromLocalStorage = function() {
        var readArrayStr = localStorage.getItem('messagingArray');
        if (readArrayStr && readArrayStr.length > 0) {
          $scope.arr = JSON.parse(readArrayStr);
        } else {
          $scope.arr = [{
              name: "user1"
            },
            {
              name: "user2"
            },
            {
              name: "user3"
            },
            {
              name: "user4"
            }
          ];
        }
      }
    
      //called at each update, stores the latest status in localstorage
      $scope.updateLocalStorage = function() {
        localStorage.setItem('messagingArray', JSON.stringify($scope.arr));
        /* console.info("updated local storage !!"); */
      }
    
      $scope.checkAndInitiateFromLocalStorage();
    
    
    });
</script>

Реагировать:

    <script src = "react.min.js"></script>
    <script src = "react-dom.min.js"></script>
    <script src = "browser.min.js"></script>
    
    <div id = "app"></div>

    
<script type = "text/babel">


class Application extends React.Component {
  constructor(props) {
    super(props);

 
 //called at initiazation, reads from localstorage if array is present there
  //const checkAndInitiateFromLocalStorage () {
const checkAndInitiateFromLocalStorage = () => {
    var readArrayStr = localStorage.getItem('messagingArray');
    if (readArrayStr && readArrayStr.length > 0) {
      this.state.arr = JSON.parse(readArrayStr);
    } else {


this.state = {
      arr: [
    {      name: "user1"},
    {      name: "user2"},
    {      name: "user3"},
    {      name: "user4"}
      ],

    };

    }
   }

this.checkAndInitiateFromLocalStorage = this.checkAndInitiateFromLocalStorage.bind(this);
this.updateLocalStorage = this.updateLocalStorage.bind(this);
  }


  //called at each update, stores the latest status in localstorage
updateLocalStorage() {
    localStorage.setItem('messagingArray', JSON.stringify(this.state.arr));
   
  };


componentDidMount() {
this.checkAndInitiateFromLocalStorage(); 
this.updateLocalStorage();
}
  render() {
    return (
        <div>
          <h3>Display Data</h3>
 <ul>
            {this.state.arr.map((obj, i) => (
              <li key = {i}>
                {obj.name} - {obj.name}
               
              </li>
            ))}
          </ul>
</div>

    );
  }
}




ReactDOM.render(<Application />, document.getElementById('app'));



</script>

Вот обновленное сообщение об ошибке реакции:

Uncaught TypeError: Cannot read properties of undefined (reading 'bind')
    at new Application (eval at transform.run