Conditional inside map JSX

Viewed 8462

I want to create a conditional rendering inside a map. The data is taken from a JSON file with this structure:

export const products = [   
            {
                "scores": {
                    "quality": 8,
                    "relevancy": {
                        "design": 3,
                        "code": 9,
                        "business": 5
                    }
                },
                "title": "AdCall: Bringing WebRTC to display ads",
                "subtitle": "The first advertising banner with video calls",
                "content": [
                    {
                        "type": "text",
                        "body": "AdCall is a concept for a new kind of online advertising banner. Using WebRTC, it allows for a click to call action with the aim of increasing conversions. It's built with a Node backend and deployed on Heroku."
                    }
                ]
            }
]

So I created a map through the array and then I want to render the content section depending on what is the type. I used a double map for this and I need a conditional in the second map but it is not working:

    return (
                <div className="LongWork">
                    {products.map((product, i) => {
                        <div className="product-wrapper" key={i}>
                            <div className="subtitle"><span className="subtitle-span">{product.subtitle}</span></div>
                            <div className="title">{product.title}</div>
                            {product.content.map((content, l) => {
                                <div className="product-content" key={l}>
                                    {if (content.type==="text") {
                                        return (
                                            <div className="productText">
                                                {content.body}
                                            </div>
                                        )} 
                                    }}
                                </div>

                            })}
                        </div>
                    }
    )
2 Answers
Related