'use strict'; const e = React.createElement; class Bundles extends React.Component { constructor(props) { super(props); this.state = { error: null, isLoaded: true, items: [32868,32870,31676,40624] }; } render() { const { error, isLoaded, items } = this.state; if (error) { return
Error: {error.message}
; } else if (!isLoaded) { return
Loading...
; } else { return (
{items.map(bundle_id => ( ))}
); } } } class Bundle extends React.Component { constructor(props) { super(props); this.state = { error: null, isLoaded: false, bundle: {} }; } componentDidMount() { fetch("/api/products/" + this.props.bundle_id) .then(res => res.json()) .then( (result) => { this.setState({ isLoaded: true, bundle: result }); }, // Note: it's important to handle errors here // instead of a catch() block so that we don't swallow // exceptions from actual bugs in components. (error) => { this.setState({ isLoaded: true, error }); } ) } render() { function createMarkup(b) { return {__html: b.description} } const { error, isLoaded, items } = this.state; if (error) { return
Error: {error.message}
; } else if (!isLoaded) { return
Loading...
; } else { const bundle = this.state.bundle; return (

{ bundle.title }

Pricing: {bundle.price_humanized}

Buy Now
); } } } const domContainer = document.querySelector('#bundles_container'); ReactDOM.render(e(Bundles), domContainer);
Ottawa Live Streaming