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)
