'use strict'; const e = React.createElement; class Bundles extends React.Component { constructor(props) { super(props); this.state = { error: null, isLoaded: true, items: [47612,88175, 80866, 68963, 45468,53993,60587,32870] }; } //47612,45468,32868 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