[MST] Create an Entry Form to Add Models to the State Tree

It is time to add new entries to the wishlist. We will achieve this by reusing forms and models we've built so far.

In this lesson you will learn:

• MST is not limited to a single state tree. Every model can form a tree on its own
• Appending model instances to the state tree

 

New entry component can be a stateless component, using State Model to create an empty entry, just for setting default value.

Once add button was clicked, fire a callback to add new node tor the tree.

 

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

import WishListItemEdit from './WishListItemEdit';
import {WishListItem} from '../models/WishList';

class WishListItemEntry extends Component {
    constructor() {
        super();
        // create an empty entry
        this.state = {
            entry: WishListItem.create({
                name: '',
                price: 0
            })
        }
    }

    render() {
        return (
            <div>
                <WishListItemEdit item={this.state.entry} />
                <button onClick={this.onAdd}>Add</button>
            </div>
        );
    }

    onAdd = () => {
        // call the CB
        this.props.onAdded(this.state.entry);
        // clean the name and price
        this.setState({
            entry: WishListItem.create({name: '', price: 0})
        })
    }
}

export default observer(WishListItemEntry);

 

WishListListView.js

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

import WishListItemView from "./WishListItemView"
import WishListItemEntry from './WishListItemEntry';

class WishListView extends Component {
   render() {
       const {wishList} = this.props;
       return (
           <div className="list">
               <ul>{wishList.items.map((item, idx) => <WishListItemView key={idx} item={item} />)}</ul>
               Total: {wishList.totalPrice} €
               <WishListItemEntry onAdded={this.onItemAdded}/>
           </div>
       );
   }

    onItemAdded = (entry) => {
       if(entry) {
           this.props.wishList.add(entry);
       }
    }
}

export default observer(WishListView)