Interpolate javascript in html loaded from mongoDB with React

gistfile1.txt

import React, { Component, Fragment } from 'react'
import { graphql, compose } from 'react-apollo'
import { Route, Switch } from 'react-router-dom'
import getProductsBySlug from '../../graphql/queries/getProductsBySlug'
import getCurrentUser from '../../graphql/queries/getCurrentUser'
import addProductToCart from '../../graphql/mutations/addProductToCart'
import getUnitsOrder from '../../graphql/queries/getUnitsOrder'
import uriImage from './20.png'



class Product extends Component {

	state = {
		index:0
	}

	addProductToCart = (event, sku) => {
		event.preventDefault()
		const { addProductToCart } = this.props
		addProductToCart({ variables: { sku }, refetchQueries: [{ query: getUnitsOrder }] })
	}

	renderProduct = () => {
		const { loadingUser, user } = this.props.getCurrentUser
		if(loadingUser) { return <div/> }

		const { loading, getProductsBySlug: products } = this.props.getProductsBySlug
		if(loading || !products) { return <div/> }

		return (
			<Fragment>
				<div className='product-detail'>
					<div className='product'>
						<figure>
							<img src={`/product/${products[this.state.index].sku}.png`}/>
						</figure>

						<div className='detail'>
							<p>{products[this.state.index].name}</p>

							<select size='1' onChange={ (event) => this.setState({ index: event.target.value }) }>
								{
									products.map((product, index) => (
										<option key={product._id} value={index}>
											{ product.flavor ? `${product.flavor} - ${product.weight} - (${product.points} pv)`: `${product.weight} - (${product.points} pv)`}
										</option>
									))
								}
							</select>
							{
								user && (
								<p className='price'>
									<span className='price'>{products[this.state.index].price}€</span>
									<button className='btn-primary' onClick={ (event) => this.addProductToCart(event, products[this.state.index].sku) }><span className="icon-awesome-shopping-cart"></span> Añadir!</button>
								</p>
								)
							}
						</div>
					</div>

					<div className='content'>
						<h2 className='title' dangerouslySetInnerHTML={{ __html: products[this.state.index].content.title }} />
						<h4 className='subTitle' dangerouslySetInnerHTML={{ __html: products[this.state.index].content.subTitle }} />
						<div dangerouslySetInnerHTML={{ __html: products[this.state.index].content.content }} />
					</div>

				</div>
			</Fragment>
		)
	}

	render(){
		const { match } = this.props


		return (
			<Route exact path={`${match.url}`} render={ (props) => this.renderProduct() } />
		)
	}
}


export default compose(g
	graphql(getCurrentUser, { name:'getCurrentUser' }),
	graphql(getProductsBySlug, {
		name: 'getProductsBySlug',
		options: ({ match: { params: { slug } } }) => ({ variables: { slug } })
	}),
	graphql(addProductToCart, { name: 'addProductToCart' })
)(Product)