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

Posted 2020-10-22 Answer1215

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)