React MVVM example

FriendViewModel.js

class FriendViewModel {
  _personalId;
  _friend;
  
  constructor(personalId, friend) {
    this._personalId = personalId;
    this._friend = friend;
  }
  
  delete() {
    personalService.removePresonalFriend(this.personalId, this._friend)
  }
  
  get name () {
    return this._friends.name;
  }
}

PersonalView.jsx

export default ({ id }) => {
  const viewModel = new PersonalViewModel(id);

  useEffect(() => {
    viewModel.onLoad();
  });
  
  return (<div>
    <h1>
      { 
        Binding({
          dataContext: viewModel,
          path: "fullName",
          mode: ViewModelMode.OneWay
        })
      }
    </h1>
    <input value={Binding({dataContext: viewModel, path: "age", mode: ViewModelMode.TwoWay})}
    <table>
     {
        viewModel.friends.Map(tableFriendLineBuilder)
     }
    </table>
           
  </div>);
}

function tableFriendLineBuilder(friendViewModel) {
  return (<tr>
            <td>{Binding({dataContext: viewModel, path: "name", mode: ViewModelMode.OneWay})}</td>
            <td><button onclick={friendViewModel.delete}></td>
          <tr>);
}

PersonalViewModel.js

class PersonalViewModel {
  _id;
  _data;
  _friends;
  
  constructor(id) {
    this._id = id
  }
  
  onLoad() {
    this._data = personalService.find(this.id);
    this._friends = this._data.friends.map(friend => new FriendViewModel(friend));
  }
  
  get fullName () { return this._data && `${this._data.firstName} ${this._data.lastName}`; }
  
  get age () {
    return this._data.age;
  }
  
  set age (value) {
    this._data.age = value;
    this.raisePropertyChanged("age");
    this.raisePropertyChanged("isMajor");
  }
  
  get isMajor() {
    return this._data.age > 17;
  }
  
  get friends () {
    return this._friends;
  }
}