Conditional inside map JSX

Question

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>
                    }
    )

Mayank Shukla · Accepted Answer · 2018-05-16T19:21:36.520

Use ternary operator for conditional rendering, because if-else we can't use inside JSX.

Another issue is, you are not returning anything inside map body so use return also to return the elements.

Why we can't use if-else inside JSX?

Check this answer for explanation: if-else statement inside jsx: ReactJS

Write it like this:

<div className="LongWork">
    {products.map((product, i) => {
        return (
            <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) => {
                    return(
                        <div className="product-content" key={l}>
                            {content.type === "text" ?
                                <div className="productText">
                                    {content.body}
                                </div>
                            : null}
                        </div>
                    )
                })}
            </div>
        )
    })}
</div>

Update:

Use dangerouslySetInnerHTML to render html strings.

Check this snippet:

let str = "<div>Hello Ocram</div>"

let App = () => {
   return(
       <div>
          <div dangerouslySetInnerHTML={{ __html: str }}></div>
       </div>
   )
}

ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

Thanks. One of the element of the JSON file is an HTML section saved as string. How can I render it as HTML in the page? — ocram, May 25 '17 at 11:43

priya · Answer 2 · 2017-05-25T11:33:27.727

Change in map function code :

return(
                <div className="LongWork">
                    { products.map((product, i) => {
                        return <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) => {
                                return <div className="product-content" key={l}>
                                    if(content.type==="text"){
                                        return (
                                            <div className="productText">
                                                {content.body}
                                            </div>
                                        )} 
                                    }}
                                </div>

                            })}
                        </div>
                    } )}

As remove the curly brace before if statement in above file

Hope it may helps.

Happy coding!!

we can't use if-else inside jsx, this solution will throw error, check the doc for reason: https://react-cn.github.io/react/tips/if-else-in-JSX.html — Mayank Shukla, May 25 '17 at 11:31

Conditional inside map JSX

2 Answers2