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)