How to use liquid with ReactJS

flo_
Excursionist
21 2 4

Hello,

I've searched and seen a few topics about using javascript and liquid together, but I still can't find a way to make this work :

I'm trying to write a React component that will simply return the names of my product. (In the end it should show the product template but I'm not there yet).

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

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

 

When I do it like this, the liquid code is not interpreted and a {{ 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, and sorry if this is a stupid question.

Replies 2 (2)
Ninthony
Shopify Partner
2247 339 900

I don't have an answer for this but would also like to know myself since I just began learning React. Thanks for the post

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
flo_
Excursionist
21 2 4

I have found a npm package called react-liquid that seems to address this very issue, but so far I've been unable to make npm work with Shopify. Do you have any idea on how to do this ? I come from back end development so I'm not so good with JS, but it seems that Shopify doesn't detect my package.json file.