[MST] Build Forms with React to Edit mobx-state-tree Models

We will expand our UI, and give the user the possibility to edit his wishlist. We will use the earlier defined actions. We also will use model clones only to modify data temporarily, and after approving the changes, apply them back to the original model.

In this lesson you will learn:

• How to call model actions from a component
• Using clone to create a full, deep clone of any model instance
• Using applySnapshot to update the state of a model instance given a snapshot.

The whole point for building a editing form component is that:

1. avoid two ways data flow, means that you change the data inside the form, without saving but the data was mutated already. To solve this problem, we will use 'clone' from 'mobx-state-tree'.

2. When save the data, we can use 'getSnapshot' and 'applySnapshot' from the lib.

import React, {Component} from "react"
import {observer} from "mobx-react";

import {clone, getSnapshot, applySnapshot} from 'mobx-state-tree';

import WishListItemEdit from "./WishListItemEdit"

class WishListItemView extends Component {
    constructor() {
        super();

        this.state = {isEditing: false}
    }

    render() {
        const {item} = this.props;
        return this.state.isEditing ?
            this.renderEditable() :
            this.renderItemView(item);
    }

    renderEditable() {
        return (
            <li className="item">
                <WishListItemEdit item={this.state.clone}/>
                <button onClick={this.onSaveEdit}>