I've searched but couldn't find the information, I hope someone experienced with Shopify (or maybe any framework using a templating language actually, I guess it would be the same with Twig) and React can help me. I'm trying to write a React component that will simply return the names of my product.

Here's what the render function of my component looks like:

render() {
        return <div className="full-width">
            {
                this.props.products.map((product, i) => {
                    return(
                        '{{ all_products["'+ product +'"].title }}'
                    )
                })
            }
        </div>
    }

When I do it like this, the liquid code is not interpreted and {{ all_products["product-n1"].title }} is displayed directly in the HTML. Any ideas on how I could make the liquid part being interpreted ? Thanks a lot in advance if you can help me.