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-16 19:21:36Z

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?

priya · Accepted Answer · 2017-05-25 11:33:27Z

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: react-cn.github.io/react/tips/if-else-in-JSX.html

Collectives™ on Stack Overflow

Conditional inside map JSX

2 Answers 2

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Linked

Related