How to properly re-write AngularJS code to React?

I have the code below which reads stores and updates data to and from from localstorage and it works fine with AngularJS.

Here is my issue:
Am trying to re-write the Angularjs code to React but it throws error unexpected token.

AngularJS:

<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.log("updated local storage !!"); */
}
$scope.checkAndInitiateFromLocalStorage();
});
</script>

React:

    <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>

Here is the updated react error message:

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

This issue was solved by Moving the definition of checkAndInitiateFromLocalStorage outside of the constructor.

Here is the code below

class Application extends React.Component {
constructor(props) {
super(props);
this.state = {
arr: [
{      name: "user1"},
{      name: "user2"},
{      name: "user3"},
{      name: "user4"}
],
};
this.checkAndInitiateFromLocalStorage = this.checkAndInitiateFromLocalStorage.bind(this);
this.updateLocalStorage = this.updateLocalStorage.bind(this);
}
checkAndInitiateFromLocalStorage () {
//const checkAndInitiateFromLocalStorage = () => {
var readArrayStr = localStorage.getItem('messagingArray');
if (readArrayStr && readArrayStr.length > 0) {
this.state.arr = JSON.parse(readArrayStr);
} else {
this.state.arr;
}
}
//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'));