The Walrus The Walrus - 1 year ago 154
React JSX Question

How to render jsx correctly

<div className="feedback">
{ (this.state.finished) ?
questions.map(function(x, index) {
return <div>
</div>
})
:
null
}
</div>


so I have the above code at the moment. I would like to add in another piece of js code like this
this.state.score
but not within the map function as I only want it rendered once (currently it renders every time it maps over the array)

<div className="feedback">
{ (this.state.finished) ?
{this.state.score} //WANT TO ADD IT HERE
questions.map(function(x, index) {
return <div>
</div>
})
:
null
}
</div>


but this doesn't work. so how can I add my code in here in this block? I need it inside the ternary too

Answer Source

Ternary expressions in JSX must return either an array or a single node, similar to how the render method of React must return only a single node.

<div className="feedback">
    { (this.state.finished) ?
      <div>
        {this.state.score}
        {questions.map(function(x, index) {
          return <div></div>
        })}
      </div>
      :
      null
    }
</div>

Now, the ternary results in a single node (a <div>) that basically "wraps" all the things you want to conditionally render. Also, note that the questions.map is wrapped in curly braces {} because you're nesting inline JavaScript inside of JSX inside of even more inline JavaScript.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download